【问题标题】:ReactJS - Waiting for user to finish multiple inputsReactJS - 等待用户完成多个输入
【发布时间】:2017-07-11 15:51:00
【问题描述】:

我刚开始学习 ReactJS,因此我们将不胜感激。我正在尝试制作一个表单,用户将他/她的地址输入到多个输入字段中。当用户完成输入所有输入字段时,将触发一个函数来验证地址。通过研究,我发现了 onChange 和 onBlur 但似乎只适用于一个输入字段。有没有其他方法可以跟踪所有五个输入并在用户完成后触发一个功能?或者如果有任何方法可以使用 onChange 来做到这一点,我很想知道。以下是我的表单的代码。提前谢谢你。

<form>
      <label>
        <DebounceInput
          name="addressLine1"
          placeholder="Address Line 1"
          debounceTimeout={300}
          onChange={ (e) => this.handleChange(e, name)}
        />
      </label>
      <label>
        <DebounceInput
          name="addressLine2"
          placeholder="Address Line 2"
          debounceTimeout={300}
          onChange={ (e) => this.handleChange(e, name)}
          value={this.state.address.addressLine2}
        />
      </label>
      <label>
        <DebounceInput
          name="city"
          placeholder="City"
          debounceTimeout={300}
          onChange={ (e) => this.handleChange(e, name)}
          value={this.state.address.city}
        />
      </label>
      <label>
        <br />
        <DebounceInput
          name="state"
          placeholder="State"
          debounceTimeout={300}
          onChange={ (e) => this.handleChange(e, name)}
          value={this.state.address.state}
        />
      </label>
      <label>
        <DebounceInput
          name="postalCode"
          placeholder="Postal Code"
          debounceTimeout={300}
          onChange={ (e) => this.handleChange(e, name)}
          value={this.state.address.postalCode}
        />
      </label>
    </form>

【问题讨论】:

  • 实际上验证不再像这样工作了。它必须是动态的。请改用 redux-form。

标签: javascript forms reactjs event-handling event-listener


【解决方案1】:

也许您可以在您的 handleChange 函数中加入一个条件,您可以在其中检查您的当前状态是否足以进行验证,如果是,您可以触发验证。

【讨论】:

    猜你喜欢
    • 2015-09-19
    • 1970-01-01
    • 2021-02-07
    • 2020-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-23
    • 2018-07-25
    相关资源
    最近更新 更多