Question

我有一个默认情况下具有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>

JS

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

        }));

      }

Answer 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)}
        />)
    })
  );
}

使用键删除特定的div

1 个答案: