使用键删除特定的 div答案

【问题标题】：Remove specific div using keys使用键删除特定的 div
【发布时间】：2018-07-30 11:11:42
【问题描述】：

我有一个默认有 2 个 div 的组件，并且有一个 Add Option 可以添加额外的 div。（最多可以添加 2 个新 div）。我正在维护状态以添加或删除添加的 div。当我单击“添加选项”按钮时，我正在增加我在状态中设置的值，并在单击“删除”按钮添加或删除 div 时减小值。（每个添加的 div 都有一个删除按钮）我的问题在这种方法中，当我单击任一添加的 div 而不是我要删除的 div 的“删除”按钮时，只有最后一个 div 被删除。如何使用键删除 div，以便我可以删除我想要的确切 div？

我的代码

html

for (let i = 3; i <= this.state.maxImage; i++) {
      list.push(<div key={i}>{this.state.addOption > i &&
        <div className="txt_vote_bar_div">

          <div className="full_div right0" style={{width: '15px', height: '15px'}} id="close"
               onClick={this.removetextpoll}>
            <i className="fa fa-times float_right"/>
          </div>

          <Field name={`inputName${i}`} component="input" type="text" className="vote_input" placeholder={`Option ${i}`}
                 maxLength={textPollMaxLength}/>
        </div>}
        </div>
      )
    }

    return (
    <form onSubmit={this.props.handleSubmit}>


                <div className="txt_vote_bar_div">
                  <Field name="inputName1" component="input" type="text" className="vote_input" placeholder="Option 1"/>
                </div>

                <div className="txt_vote_bar_div">
                  <Field name="inputName2" component="input" type="text" className="vote_input" placeholder="Option 2"/>
                </div>

                {list}


                {this.state.addOption === 5 ? null :
                  <div className="txt_vote_bar_div" id="txt_vote_bar_div_create"
                       onClick={this.addOption}>
                    <span className="horiz_center font_bold" id="addOption">Add Option</span>
                  </div>
                }
         </form>

constructor() {
    super();
    this.state = {
      addOption: 3,
      maxImage: 4,
      optionBtn: true,

    };
    this.addOption = this.addOption.bind(this);
    this.removetextpoll = this.removetextpoll.bind(this);

  }

    addOption() {
        this.setState((prevState) => ({
          addOption: ++prevState.addOption
        }));

      }

      removetextpoll() {

        this.setState((prevState) => ({

          addOption: --prevState.addOption

        }));

      }

【问题讨论】：

使用 removetextpoll(id) 将当前 div 发送到您的函数。

标签： javascript html reactjs key

【解决方案1】：

我认为最好在这样的状态下添加选项描述

this.state = {
  addOption: 3,
  maxImage: 4,
  optionBtn: true,
  fields: [
    { id: 1, name: 'SOME_NAME1', value: 'SOME_VALUE1', placeholder: 'SOME_PLACEHOLDER_VAL1' },
    { id: 2, name: 'SOME_NAME2', value: 'SOME_VALUE2', placeholder: 'SOME_PLACEHOLDER_VAL2' }
  ]
};

并通过 state.fields 数组内容呈现/添加/删除项目。

所以你可以用这种方式删除项目

handleDeleteClick(idToDelete, event) {
  /*delete from state by id*/
}

render() {
  return(
    this.state.fields.map((field) => {
      return (
        <Field 
          key={ field.id }
          name={ field.name }
          value={ field.value }
          placeholder={ field.placeholder }
          onDeleteClick={ this.handleDeleteClick.bind(this, field.id)}
        />)
    })
  );
}

【讨论】：