Question

我刚刚开始学习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>

Answer 1

也许你可以在handleChange函数中加入一个条件，在那里检查你的当前状态是否足以进行验证，如果是这样你可以触发验证。

ReactJS - 等待用户完成多个输入

1 个答案: