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（这个）。不确定，但我想如果我能在这里添加删除按钮这可能会解决我的问题？

  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

首先：将输入索引作为prop发送到输入

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

如何在React中有选择地删除动态添加的输入字段？

1 个答案: