Question

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

单击按钮，我想验证textfield。如果没有值，则按钮点击并显示消息上的必需字段验证，与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：查看此代码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控件中单击按钮时验证表单域

1 个答案: