Question

仅当用户按下按钮时，我才需要将ErrorMessage绑定到文本字段。在这个例子中，有一个很好的例子，如何使用errormessage，但是问题是我不知道如何在用户单击后添加append 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;
}

谢谢

Answer 1

我想到的最简单的方法是在状态检查中声明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中的当前值来自定义错误消息的能力。

Answer 2

您需要根据用户输入设置显示/隐藏错误消息的状态，请检查以下代码

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;

我希望这会有所帮助。

Answer 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
  }
}));
}

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

希望这会有所帮助。

干杯！

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

3 个答案: