ReactJS - 如何从多个子组件中获取表单值

Question

我知道这可能有一些类似的问题，但我似乎无法找到适合我情况的解决方案。

我有一个表单，会和子组件的内容一起提交，子组件是onClick附加的，可以无限附加。如何从所有子组件中获取值并发布它。

这是 index.js

class ListOfProducts extends React.Component {
  constructor()
  {
    super();
    this.appendChild = this.appendChild.bind(this);
    this.state = {
      children: [],
      }
  }  

    appendChild() {
      this.setState({
        children: [
          ...this.state.children, <NewComponent/>
        ]
      });
    }

    render() {
      return (
        <form>
          <div>
            <pre><h2 className="h2"> Sales Order</h2></pre>
            <div className="box" style={{height: '520px', width: '1300px', position: 'relative', overflow: 'auto', padding: '0'}}>
            <div style={{height: '1000px', width: '1000px', padding: '10px'}}>

              <div>
                    {this.state.children.map(child => child )}
              </div>
            </div>
            </div>

          <button className="addbut" onClick={() => this.appendChild()}>Add Items</button>
          </div>
        </form>
    )  
  }
}

这是NewComponent.JS的部分代码

            <select
              name="sel"
              className="sel"
              value={this.state.selecteditems}
              onChange={(e) => 
                this.setState({selecteditems: e.target.value})}
            >
            {this.state.data.map(item => 
              <option key={item.productID} value={item.unitPrice}>
                {item.itemName}
              </option>
            )}
            </select>

            {/*unit price*/}
            <p>Unit Price: RM {this.state.selecteditems} </p>

            {this.state.selecteditems.length ? (
              <p>Quantity: </p>
            ) : null }

            {/*button to add quantity*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.addPro}> + </button>
            ) : null }

            {/*textbox for quantity*/}
            {this.state.selecteditems.length ? (
              <input type="text" ref="quan" placeholder="Quantity" 
                value={this.state.quantity}
                onChange={(e) => 
                  this.setState({quantity: e.target.value})}
                >
                </input>
            ) : null }

            {/*button to decrease quantity}*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.decPro}> - </button>
            ) : null }

            {/*subtotal*/}
            {this.state.selecteditems.length ? (
              <p>Sub Total: RM {this.state.subtot} </p>
            ) : null }

提前致谢！

Answer 1

又快又笨：像这样添加回调

<NewComponent onChange={this.onNewComponentChange}/>

（当然，在 NewComponent 的每次更改时调用此 onChange 回调）

Answer 2

我可以想到从子组件获取值的两种方法 -

1. 拥有一个可以实际存储所有子组件数据的状态管理系统（类似于 redux）。当子组件的数据发生变化时，它应该被同步到存储中，并且父组件可以使用相同的方式在提交时发布数据。
2. 将ref 分配给每个附加的子组件。将这些参考值保存在数组中。在提交表单时遍历这些引用，并调用子组件的某些特定 getter 函数来为您提供其数据。

首选方法是第一种方法。