如何有选择地删除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 
    ... 
}