在 office fabric Ui 控件中单击按钮时验证表单字段

Question

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

单击按钮时我想验证 textfield.If 没有值然后在单击按钮时触发必填字段验证并显示与 onGetErrorMessage 事件中显示的消息相同的消息。

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

我该怎么做？

Answer 1

首先你必须使用 refs 到你的 TextField

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

现在您可以使用 refs

设置点击时 onGetErrorMessage

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： 查看此代码 snippet

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

在 office fabric Ui 控件中单击按钮时验证表单字段

Validating Form Fields on button click in office fabric Ui control

reactjs

office-ui-fabric

office-fabric