代码之家 › 专栏 › 技术社区 › CraZyDroiD

使用键移除特定div

key reactjs html javascript

0

CraZyDroiD · 技术社区 · 7 年前

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

我的代码

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

        }));

      }

1 回复 | 直到 7 年前

1

Sasha Kos 7 年前

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

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' }
  ]
};

所以你可以这样移除物品

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