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

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

我有一个将与子组件的内容一起提交的表单,子组件被附加到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 }

提前致谢!

评论
  • kqui
    kqui 回复

    快速而愚蠢:像这样添加回调

    <NewComponent onChange={this.onNewComponentChange}/>

    (and implement calling of this onChange callback at every change at NewComponent of course)

  • lquia
    lquia 回复

    我可以考虑两种方法从子组件中获取价值

    1. Assign ref to each of the child component when it gets appended. Iterate through those ref values onsubmit and ask the data from the child component.
    2. Have a state management system (something like redux) which can actually store the data of all the child components. As and when the NewComponent data changes, its synced to the store and the same can be used by the parent to post the data on submit.