如何在填写所有输入字段之前禁用表单提交按钮？！ ReactJS ES2015

Question

嗨，我找到了一个单一字段表单的答案……但是如果我们有一个包含多个字段的表单怎么办？

如果您有 1 个字段，则可以禁用它，但是当您想基于多个字段禁用它时，它不起作用：

 getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

原文由 Khalil Gharbaoui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是表单验证的基本设置：

 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>
  }
})

在更复杂的设置中，您可能希望将每个输入字段放在一个单独的组件中。并使代码更干（注意更改处理程序中的重复）。

那里也有各种反应形式的解决方案，就像 这里 一样。

原文由 wintvelt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我会在这里采取一些不同的方式……

我不会在每个处理程序中设置 submitDisabled onChange 处理程序，而是挂接到生命周期方法中以监听更改。

准确地说是 componentWillUpdate(nextProps, nextState) 。在每次更改组件之前调用此方法 - 道具更改或状态更改。在这里，您可以验证您的表单数据并设置您需要的标志 - 所有这些都在一个地方。

代码示例：

 componentWillUpdate(nextProps, nextState) {
  nextState.invalidData = !(nextState.email && nextState.password);
},

完整的工作小提琴 https://jsfiddle.net/4emdsb28/

原文由 Andreyco 发布，翻译遵循 CC BY-SA 3.0 许可协议