在React中,可以通过以下步骤从表单提交的多个输入框中获取值,并将值作为对象存储在状态数组中:
constructor(props) {
super(props);
this.state = {
inputs: []
};
}
name
属性,用于标识不同的输入框。例如:<input type="text" name="input1" />
<input type="text" name="input2" />
event.target.elements
获取表单中的所有元素,并遍历它们。使用name
属性来识别输入框,并将输入框的值存储在一个临时对象中。例如:handleSubmit(event) {
event.preventDefault();
const elements = event.target.elements;
const inputs = {};
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
if (element.name) {
inputs[element.name] = element.value;
}
}
this.setState(prevState => ({
inputs: [...prevState.inputs, inputs]
}));
}
onSubmit
事件中调用上述提交事件处理函数。例如:<form onSubmit={this.handleSubmit}>
{/* 表单输入框 */}
<button type="submit">提交</button>
</form>
这样,每次提交表单时,输入框的值将被存储在React组件的状态数组中。你可以通过访问this.state.inputs
来获取存储的对象数组。
这是一个基本的实现方法,可以根据具体需求进行调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云