【发布时间】: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