验证表单域按钮单击办公面料Ui控件

Question

我的窗体中有一个TextField和PrimaryButton。

按钮单击我想验证textfield.If没有值然后触发buttonfield验证按钮单击并显示消息相同的onGetErrorMessage事件显示。

我知道验证是fire onBlur事件，但我想点击按钮点击验证。

我该怎么办？

Answer 1

首先，你必须使用refs您TextField

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

现在你可以使用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设置点击onGetErrorMessage：看看这个代码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> 
    ); 
    } 
}