Javascript 如何在react中呈现多个组件，其中所有组件都接受数据输入

我试图允许用户按下一个按钮来呈现新的组件，每个组件都接收数据。这是我目前掌握的代码：

class Example extends Component {

  constructor(props) {
    super(props);
    this.state = { text: '', number: '', events: []};
  }

  onClick(){
  //to implement
  }

  numberOnChange(value) {
    this.setState({ number: value });
  }

  textOnChange(value) {
    this.setState({ text: value});
  }

  onClickNewEvent(value) {
    const temp = this.state.events;
    temp.push('');
    this.setState({events: temp})
  }

  onClickRemoveEvent(value) {
    const temp = this.state.events;
    temp.push('');
    this.setState({events: temp})
  }

  render() {
    let event=
      <div>
        <div>Input a number</div>
        <div> <InputNumber min={0} defaultValue={0} onChange={(value) => this.numberOnChange(value)} /> </div>
        <div>Input some text</div>
        <div><Input placeholder="Input text" onChange={(value) => this.textOnChange(value)}/></div>
      </div>;
    return (
      <div>
        <div>
          <Button onClick = {() => this.onClickNewEvent()}>Create new event</Button>
          <Button onClick = {() => this.onClickRemoveEvent()}>Remove an event</Button>
        </div>
        <div>
          <Button onClick = {() => this.onClick()}>Enter</Button>
        </div>
        {this.state.events.map((value, index)=>{
          return <div><Card key>{event}</Card></div>;
        })}
      </div>
    );
  }
}

export default Example;

类示例扩展组件{
建造师（道具）{
超级（道具）；
this.state={文本：“”，编号：“”，事件：[]}；
}
onClick（）{
//实施
}
数字变化（值）{
this.setState（{number:value}）；
}
textOnChange（值）{
this.setState（{text:value}）；
}
onClickNewEvent（值）{
const temp=this.state.events；
温度推力（“”）；
this.setState（{events:temp}）
}
onClickRemoveEvent（值）{
const temp=this.state.events；
温度推力（“”）；
this.setState（{events:temp}）
}
render（）{
让事件=
输入一个数字
此.numberOnChange（值）}/>
输入一些文本
this.textOnChange（value）}/>
;
返回(
this.onClickNewEvent（）}>创建新事件
this.onClickRemoveEvent（）}>删除事件
this.onClick（）}>Enter
{this.state.events.map（（值，索引）=>{
返回{event}；
})}
);
}
}
导出默认示例；

---

在本例中，显然无论我在哪个事件中进行更改，它都会更改状态中的相同参数。如何更改此设置以存储每个事件的数据？

您必须在事件列表中存储所需的值。
（顺便说一句，你不应该使用

temp.push

，因为你不应该直接改变状态）
e、 g:

let event=

部分始终相同，但每个事件需要不同的详细信息。
您应该创建自己的组件（例如

MyEventComponent

），而不是

let event=…

部分，然后在循环中传递值和onChange函数，例如：

{this.state.events.map((item, index)=>{
    return <MyEventComponent
        index = { index }
        number = { item.inputNumber }
        text = { item.inputText }
        textOnChange = { this.textOnChange( index, value ) }
    />;
})}

---

对不起，您能否提供有关如何创建

的更多信息，我是否需要在单独的文件中执行此操作？那会是什么样子？我想这是个离题的问题。我建议看一看，例如，或者打开另一个关于如何构建react组件的问题。我了解如何创建react组件，一般来说，我只是不确定如何在我的原始组件和新组件之间传递信息。例如，您可以通过道具将inputNumber和inputText传递给新的react组件，但是当输入一个数字时，您将如何更改原始组件中的状态？我使用此资源设法找到它：谢谢帮助！是的，你是对的，我更新了我的答案以显示如何更改原始组件中的状态。

{this.state.events.map((item, index)=>{
    return <MyEventComponent
        index = { index }
        number = { item.inputNumber }
        text = { item.inputText }
        textOnChange = { this.textOnChange( index, value ) }
    />;
})}

textOnChange(index, value) {
    const newEvents = [ ...this.state.events ]; // copy events, to avoid mutating state directly
    newEvents[ index ].text = value;
    this.setState({
        ...this.state,
        events: newEvents
    });
}