如何有選擇地刪除React中動態添加的輸入字段？

Question

我可以添加輸入字段並獲取所述字段的狀態。我還在每個新字段中添加了一個刪除按鈕，但無法使刪除功能正常工作。

我在此處創建刪除按鈕以及輸入字段。

class InputField extends React.Component { 
render() { 
    const { name, onChange } = this.props; 
    return (
    <div className="row"> 
     <div className="input-field col s12"> 
     <label htmlFor={name}>OBR3</label> 
     <input id={name} 
       type="text" 
       className="" 
       value={this.props.inputValues} 
       onChange={onChange} /> 

       <button type='delete' value='Delete' 
            onClick={this.props.handleRemove}> 
       <i className="material-icons">remove</i> 
       </button> 
     </div> 
    </div> 
    ) 
} 
} 

export class OBR3 extends React.Component { 
... 

this.state = { 
    inputValues: {}, 
    inputs: [] 
... 

handleRemove (item, event) { 
const newState = this.state.newState 
if (newState.indexOf(item) > 1) { 
    newState.splice(newState.indexOf(item), 1) 
} 
this.setState({ inputs: newState }) 
console.log(newState.indexOf(item)) 
} 

handleChange (name, event) { 
let inputValues = this.state.inputValues 
inputValues[name] = event.target.value 
this.setState({ inputValues }) 
    } 

該函數實際上添加了輸入字段，讓我來.bind（this）。不知道，但我認爲如果我能夠在這裏添加刪除按鈕它可能會解決我的問題？

handleAddInput() { 
    const name = `OBR3-${(this.state.inputs).length}`; 

    let inputBox = <InputField key={this.state.inputs.length} 
          name={name} 
          onChange={this.handleChange.bind(this, name)} /> 

    const inputs = this.state.inputs 
    inputs.push(inputBox); 
    this.setState({ inputs }); 
    } 

最後這就是我現在如何渲染一切。

render() { 
return (
    <div> 
    <p id='OBR3'>OBR3</p> 
    <button type='submit' value='Submit' 
          onClick={this.handleAddInput.bind(this)}> 
     <i className="material-icons">add</i> 
    </button> 
    {this.state.inputs} 
    </div> 
... 

Answer 1

第一：發送輸入指數作爲道具輸入

handleAddInput(e) { 
    const inputList = this.state.inputList 

    this.setState({ 
     inputList: inputList.concat(<InputField key={inputList.length} 
               className="mdl-textfield__input" 
               type="text" 
               id="OBR3" 
               inputIndex={inputList.length} //this one 
               value={this.props.value} 
               onChange={this.props.callback} 
     />) 
    }) 
    e.preventDefault() 
} 

二：呼叫發送回event.target.value（或只是事件）和輸入指數：

<input className="mdl-textfield__input" 
    type="text" id="OBR3" 
    value={this.props.value} 
    onChange={(e) => this.props.callback(this.props.inputIndex, e.target.value)} /> 

第三名：父母：

handleOBR3OnChange(inputIndex, value) { 
    console.log(inputIndex, value) //you know, what input is changed and know the value 
    ... 
}