如何使用驗證狀態與react-bootstrap

Question

我使用的是react-bootstrap，我試圖使用validate-state選項驗證表單。我無法弄清楚如何使用getValidationState()至return error，當我提交一個表格，將輸入欄位變爲紅色。目前當表單加載時，我在控制檯ProfileCandidateForm.getValidationState ReferenceError: error is not defined中收到錯誤消息。

如果我刪除getValidationState()我可以提交表單，如果出現錯誤，則會將錯誤返回到警告框。我想在bootstrap中將其更改爲validate-state。

任何幫助表示讚賞。仍然把我的頭包裹在React身邊。

export default class ProfileCandidateForm extends Component { 
    constructor(props) { 
    super(props); 

    var profileCandidate = this.props.profileCandidate; 
    var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first; 


    this.state = { 
     firstName: firstName || "", 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    const target = event.target; 
    const value = target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    var profileCandidate = this.state; 

    insertProfileCandidate.call({profileCandidate}, (error) => { 
     if (error) { 
     alert(error.reason); 
     } 
    }); 
    } 

    getValidationState() { 
    if (error) return 'error'; 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
     <FormGroup 
      validationState={this.getValidationState()} 
      > 
      <FormControl 
       type="text" 
       name="firstName" 
       value={this.state.firstName} 
       placeholder="First name" 
       onChange={this.handleChange} 
      /> 
      <FormControl.Feedback /> 
      </FormGroup> 
      <FormGroup > 
      <Button type="submit"> 
       Save 
      </Button> 
      </FormGroup> 
     </form> 
    ) 
    } 
    } 

    ProfileCandidateForm.propTypes = { 
    profileCandidate: PropTypes.object.isRequired, 
    } 

Answer 1

您需要引用getValidationState（）函數中文本字段的值（狀態）。然後返回null（無可見驗證），'成功'（用於綠色可見驗證）或'錯誤'（用於紅色驗證）。

這是我的一個getValidationState funcs。

getValidationState() { 
    var value = this.state.value; 

    if (value===null || value==='') { return null; } 

    var valid = this._getValidity(value) 
    if (valid===true) { 
     return 'success'; 
    } else { 
     return 'error'; 
    } 
}