將具有2個屬性的多個對象推入數組

Question

我正在嘗試為醫生創建處方表格，必須要添加帶有劑量說明的新葯，因此每次醫生單擊添加另一個時，我都會動態添加兩個輸入。 但是我無法處理將兩個輸入的對象都推送到數組中的更改，我正在嘗試獲取以下內容：

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

這是我的父組件，其中添加了子組件：

<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>  

搜索組件具有自動完成搜索欄，因此我可以像這樣處理更改：

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

指令輸入其正常輸入，因此處理程序為：

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

這也是我將子級添加到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>
);

這是CodeSandbox鏈接： https ://codesandbox.io/s/zwr101okom

Answer 1

您可以將dosis置於您的狀態，然后在單擊添加按鈕時添加一個具有name和instructions屬性的新對象，最后在render方法中循環此數組。

例

 class Home extends React.Component { state = { data: [{ name: "Adderall" }, { name: "Xanax" }], loading: false, dosis: [ { name: "test medicine", instructions: "every 6 hrs" } ] }; handleChange = (e, index) => { const { name, value } = e.target; this.setState(prevState => { const dosis = [...prevState.dosis]; dosis[index] = { ...dosis[index], [name]: value }; return { dosis }; }); }; onAddChild = () => { this.setState(prevState => { return { dosis: [ ...prevState.dosis, { name: "new medicine", instructions: "some instruction" } ] }; }); }; render() { return ( <div> {this.state.dosis.map((element, i) => ( <div> <div> Medicine Name </div> <input value={element.name} name="name" onChange={e => this.handleChange(e, i)} /> <div> Instructions </div> <input value={element.instructions} name="instructions" onChange={e => this.handleChange(e, i)} /> </div> ))} <div> <button onClick={this.onAddChild}>Add Dosis</button> </div> </div> ); } } ReactDOM.render(<Home />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>