驗證表單域按鈕單擊辦公面料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> 
    ); 
    } 
}