这是表单验证的基本设置:
getInitialState() { return { email: '', text: '', emailValid: false, // valid flags for each field textValid: false, submitDisabled: true // separate flag for submit } }, handleChangeEmail(e) { // separate handler for each field let emailValid = e.target.value ? true : false; // basic email validation let submitValid = this.state.textValid && emailvalid // validate total form this.setState({ email: e.target.value emailValid: emailValid, submitDisabled: !submitValid }) }, handleChangeText(e) { // separate handler for each field let textValid = e.target.value ? true : false; // basic text validation let submitValid = this.state.emailValid && textvalid // validate total form this.setState({ text: '', textValid: textValid, submitDisabled: !submitValid }) }, render() { return <div> <input name="email" value={this.state.email} onChange={this.handleChangeEmail}/> <input name="text" value={this.state.text} onChange={this.handleChangeText}/> <button type="button" disabled={this.state.submitDisabled}>Button</button> </div> }})在更精细的设置中,您可能需要将每个输入字段放在一个单独的组件中。并使代码更干燥(请注意更改处理程序中的重复项)。
像这里一样,这里也有各种各样的反应形式的解决方案。



