Javascript 将具有2个特性的多个对象推入阵列

我想给医生开个处方， 它必须能够添加带有dosis说明的新药，因此每次医生单击“添加另一个”时，我都会动态添加两个输入。但我无法处理将两个输入的对象推入数组的更改 我想得到这样的东西：

dosis: [
    {
        name: medicine1,
        instructions: every 6 hrs
    },
    {
        name: medicine2,
        instructions: every 8 hrs
    }
]

handleChangeComponent(e) {
    this.setState({ name: e });
  }

这是添加子组件的父组件：

<ParentComponent addChild={this.onAddChild}>
    <div className="form-group col-md-6 align-middle">                                        
        <label>Medicine name:</label>
        <Search
             data={ this.state.data }
             onChange={ this.handleChangeComponent.bind(this) }
             placeholder="Search for a string..."
             class="search-class  upperinput"
             searchKey="name"
             value={this.state.name}
             ref="medicine"

         />
    </div>
    <div className="form-group col-md-6 align-middle">
        <label for="medicamento-search">Indicaciones y Duración del Tx:</label>                                                                      
        <input type="text" class="form-control" name="instructions" ref="instructions" onChange={this.handleChange} value={this.state.instructions} placeholder="Instructions.."/>
                                </div>
    {children}
</ParentComponent>  

指令输入为正常输入，因此处理程序为：

 handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

这也是我将child添加到parentComponent的方式

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

    const children = [];

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<MedicineSearch data={this.state.data} searchKey="name" key={i} number={i} value={this.state.name} onChange={ this.handleChangeComponent.bind(this) }/>);
    };
    return (... My HTML )


const ParentComponent = props => (

    <div className="col-md-12 row" id="children-pane">
        {props.children}
    </div>
);

onAddChild=（）=>{
这是我的国家({
numChildren:this.state.numChildren+1
});
}
render（）{
const children=[]；
对于（变量i=0；i(
{props.children}
);

下面是一个CodeSandbox链接：

---

您可以将

dosis

置于您的状态，然后在单击“添加”按钮时添加具有

名称

和

说明

属性的新对象，最后在渲染方法中循环此数组

示例

class Home扩展了React.Component{
状态={
数据：[{name:“Adderall”}，{name:“Xanax”}]，
加载：false，
剂量：[
{
名称：“试验药物”，
说明：“每6小时”
}
]
};
handleChange=（e，索引）=>{
常量{name，value}=e.target；
this.setState（prevState=>{
const dosis=[…prevState.dosis]；
dosis[index]={…dosis[index]，[name]：value}；
返回{dosis}；
});
};
onAddChild=（）=>{
this.setState（prevState=>{
返回{
剂量：[
…prevState.dosis，
{
名称：“新药”，
说明：“一些说明”
}
]
};
});
};
render（）{
返回(
{this.state.dosis.map（（元素，i）=>(
药名
这个.handleChange（e，i）}
/>
说明书
这个.handleChange（e，i）}
/>
))}
添加剂量
);
}
}
render（，document.getElementById（“根”））

欢迎来到StackOverflow alexrc94！请在中创建一个，例如，以便有人能更容易地帮助您。它可以工作，但我需要它与搜索栏一起使用，我遇到了问题。当我尝试将它与搜索组件一起使用时，它崩溃了：无法读取未定义的属性“name”，有没有办法将name设置为该组件的输入？依赖项是react搜索-bar@alexrc94不，你不能。但是您可以使用。对不起，我的错误，我正在尝试使您的示例与react autosuggest一起工作