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更改状态值。

<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中，将状态值更改为与状态对应的产品。

Answer 2

您可以使用ref从DOM获取表单值。

在这里，每个产品需要一个参考，因此您可以使用产品索引来保存参考并提交表单。

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };

    this.selectByProduct = {};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event, productIndex) {
    event.preventDefault();
    const size = this.selectByProduct[productIndex].value;
    console.log(`you submitted the size ${size} of product ${productIndex}`)
  }

  render() {
    return this.state.products.map((product, i) => (
      <form onSubmit={event => this.handleSubmit(event, i)}>
          <select ref={select => this.selectByProduct[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" />
      </form>
    ));
  }
}

反应-如何从循环<form>获取输入？

2 个答案: