reactjs - 在办公室结构 UI 控件中单击按钮时验证表单字段

Question

我的表单中有一个 TextField 和 PrimaryButton。

单击按钮时，我想验证文本字段。如果没有值，则在单击按钮时触发必填字段验证，并显示与 onGetErrorMessage 事件显示相同的消息。

我知道验证是触发 onBlur 事件，但我想在按钮单击时触发验证。

我该怎么做？

Answer 1

首先你必须使用refs你的TextField

<TextField ref={(input) => { this.textInput = input; }} label='test' />

现在你可以设置onGetErrorMessage点击使用refs

onClick(e){
    if(this.refs.input.value == undefined ||  this.refs.input.value == null || this.refs.input.value == '')
        this.refs.input.onGetErrorMessage = "you error message"
}

更新 1： 查看此代码段

class FormExample extends React.Component {
  constructor() {
    super();
    this.state={
      inputError:''
    }
    this.ValidateText = this.ValidateText.bind(this)
  }
  ValidateText(e){
    this.setState({
      inputError:this.input.value?'':'testing'
    })
  }
  render() {
    return (
      <div>
        <div>
          <TextField
            ref={(input) => { this.input = input; }}
            label="Name"
            errorMessage={this.state.inputError}
        />
          <input type='button' value='Submit'
          onClick={this.ValidateText} />
        </div>
      </div>
    );
  }
}