reactjs - 从子组件中获取所有选定的值

Question

我已经渲染了一个组件，该组件在按钮单击事件上多次选择下拉菜单。

class AppComponent extends React.Component {

constructor(props){
 super(props); 

this.state = {
  numChildren: 0
}
this.onAddChild = this.onAddChild.bind(this);
}

render () {
  const children = [];

  for (var i = 0; i < this.state.numChildren; i += 1) {
    children.push(<ChildComponent key={i} number={i} />);
  };

  return (
    <ParentComponent addChild={this.onAddChild} submit={this.submitData}>
      {children}
    </ParentComponent>
  );
}

submitData(){
console.log("Submit Data button");

}

onAddChild() {
  this.setState({
    numChildren: this.state.numChildren + 1
  });
}
}

ParentComponent 在 onClick 事件上添加子组件。

const ParentComponent = props => (
<div className="card calculator">
<button onClick={props.addChild}>Add Another Child 
Component</button>
<button onClick={props.submit}>Submit Data</button>

  {props.children}
</div>
);
const ChildComponent = props => < NewComponent />;

class NewComponent extends React.Component{
constructor(props){
super(props);
this.state = { 
first: null,
second: null,
third : null,
}
this.changeFirst = this.changeFirst.bind(this);
this.changeSecond = this.changeSecond.bind(this);
this.changeThird = this.changeThird.bind(this);
}

changeFirst(e) {
this.setState({
first : e.target.value
});

}
 changeSecond(e) {
this.setState({
second : e.target.value
});
}
 changeThird(e) {
this.setState({
third : e.target.value
});
}



render (){


return (
<div>
<select onChange={this.changeFirst}>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value = "Mahindra"> Mahindra</option>
<option value = "Car"> Car</option>
</select>
<select onChange={this.changeSecond}>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value = "Mahindra"> Mahindra</option>
  <option value = "Car"> Car</option>
</select>
<select onChange={this.changeThird}>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value = "Mahindra"> Mahindra</option>
  <option value = "Car"> Car</option>
</select>
</div>
);
}


}

单击按钮时，NewComponent 将呈现为子组件。我添加了 changeFirst、changeSecond 和 changeThird 自定义函数来处理更改事件并设置 NewComponent（子组件）的状态。

我想要做的是，我想获取每个子组件实例的所有选定值的列表。任何帮助表示赞赏。

标签： reactjsreact-virtualized

Answer 1

1. 您可以创建一个包装器组件（公共父级）并在您将拥有 3 个下拉列表的所有选定选项的状态下添加一个列表。
2. 创建一个负责更新所选选项列表的回调函数。
3. 将此回调传递给孩子（3 个下拉菜单）
4. 在下拉菜单中 onChange = 你的回调