如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage
Posted
技术标签:
【中文标题】如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage【英文标题】:How to set ErrorMessage on TextField dynamically on Button onClick method 【发布时间】:2019-07-10 07:53:05 【问题描述】:只有当用户按下按钮时,我才需要将 ErrorMessage 绑定到文本字段。在这有很好的例子如何使用errormessage,但问题是我不知道如何在用户点击后追加errorMeesage
<TextField id='titleField' value=titleValue required=true label=escape(this.props.description) onGetErrorMessage=this._getErrorMessage validateOnLoad=false />
这是一个按钮的调用:
private _buttonOnClickHandler()
let textvalue = document.getElementById('titleField')["value"];
if(textvalue === "")
//call onGetErrorMessage or something that will set ErrorMeesage and input will be red
return false;
谢谢
【问题讨论】:
【参考方案1】:您需要根据用户输入设置显示/隐藏错误消息的状态,检查以下代码
import React, Component from 'react';
class App extends Component
state =
isErrorMessageHidden: true
clickHandler = () =>
let textValue = document.getElementById('titleField').value;
if(textValue === '')
this.setState(isErrorMessageHidden: false);
else
this.setState(isErrorMessageHidden: true);
render()
return (
<div>
<button onClick=this.clickHandler>Check</button>
<input type='text' id='titleField' />
<p
style='color':'red'
hidden=this.state.isErrorMessageHidden
>Please fill the form</p>
</div>
);
export default App;
我希望这会有所帮助。
【讨论】:
【参考方案2】:我能想到的最简单的方法是在状态检查上预测onGetErrorMessage
,它会跟踪按钮是否已被点击。
<TextField
id='titleField'
value=titleValue
required=true
label=escape(this.props.description)
// Only allow showing error message, after determining that user has clicked the button
onGetErrorMessage=this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined
validateOnLoad=false
/>
然后在您的按钮单击处理程序中,只需设置该状态值:
private _buttonOnClickHandler()
this.setState( buttonHasBeenClicked: true );
return false;
只要你将buttonHasBeenClicked
实例化为false,那么这个方法就可以满足:(a)用户点击按钮之前,TextField
不显示错误信息,(b)点击按钮之后用户单击按钮,开始显示错误消息。您保留使用_getErrorMessage(value)
根据TextField
中的当前值自定义错误消息的能力。
【讨论】:
【参考方案3】:另一种方法是通过状态值处理所有验证。
控件定义是这样的
<TextField placeholder="Enter a venue location" required onChange=this._onVenueChange ...this.state.errorData.isValidVenue ? null : errorMessage: strings.RequiredFieldErrorMessage ></TextField>
在 Onchange 事件中,验证控件的值并设置错误状态值如下,
private _onVenueChange = (event: React.FormEvent<htmlTextAreaElement | HTMLInputElement>, newValue?: string): void =>
this.setState(prevState => (
errorData:
...prevState.errorData,
isValidVenue: newValue && newValue.length > 0,
isValidForm: this.state.errorData.isValidForm && newValue && newValue.length > 0
));
this.setState(prevState => (
formData:
...prevState.formData,
venue: newValue
));
在上面的示例中,我在状态中使用了两个对象,一个用于捕获值,另一个用于捕获字段是否错误。
希望这会有所帮助..
干杯!!!
【讨论】:
以上是关于如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage的主要内容,如果未能解决你的问题,请参考以下文章
如何通过在表格中动态生成的按钮上的“onclick”删除表格中的一行?