如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage

Posted 2023-03-27

【中文标题】如何在按钮 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
  
));

在上面的示例中，我在状态中使用了两个对象，一个用于捕获值，另一个用于捕获字段是否错误。

希望这会有所帮助..

干杯！！！