javascript - React - 如何从循环 获取输入？

Question

我是 React 新手。我有一个条件是循环表单，请帮助我

这是代码:

this.state.products.map(product => {
   <form onSubmit={this.handleSubmit}>
        <select name="size" className="form-control" style={{height: '46px;'}}>
           <option key="1" value="1">Red</option>
           <option key="2" value="2">Yellow</option>
           <option key="3" value="3">Green</option>
         </select>
        <input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
   </form>
});

如果有3个表单，如何从点击的提交按钮表单中获取选定的值？或者还有其他简单的方法吗？谢谢

Answer 1

一种方法是更改​​ onSubmit 函数的处理方式。

因此您可以像这样传递您要提交的产品索引

this.state.products.map((product, i) => {
   <form onSubmit={event => this.handleSubmit(event, i)}>
        <select name="size" className="form-control" style={{height: '46px;'}}>
           <option key="1" value="1">Red</option>
           <option key="2" value="2">Yellow</option>
           <option key="3" value="3">Green</option>
         </select>
        <input type="submit" value="Pick This" className="form-control" onClick={() => this.handleSubmit} />
   </form>
});

看起来您的表单不受控制，另一个可能是让选择更改状态中的值。

<select name="size" onChange={e => this.handleChange(e, i)} className="form-control" style={{height: '46px;'}}>
  <option key="1" value="1">Red</option>
  <option key="2" value="2">Yellow</option>
  <option key="3" value="3">Green</option>
</select>

并且在您的handleChange中，您将更改与您所在州的产品相对应的状态值。