React.js删除特定元素

Question

我对react.js非常陌生，但正在学习很多东西。 我有一个特定的问题要解决。 我希望能够选中一个复选框以删除动态创建的元素。

目前，我的代码已设置为呈现多个元素，并且每次单击按钮时，该数字（处于元素状态）均加1。

显然，我可以将状态num减1，但是试图删除特定元素。

我如何尝试通过ID删除特定元素？

当前代码：

  4 class FieldSection extends Component{
  5   constructor(){
  6     super()
  7
  8     this.state ={
  9       numberOfFields: 1
 10     }
 11   }
 12   addField = () => {
 13       const { numberOfFields } = this.state;
 14       this.setState({ numberOfFields: numberOfFields + 1 });
 15     }
 16
 17   listFields = (numberOfFields) => {
 18     var fields = [];
 19     for(var i=0; i<numberOfFields; i++){
 20       fields.push(
 21         (<Field />)
 22       )
 23       setId();
 24     }
 25     return fields;
 26   }
 27
 28   render () {
 29     const {listFields, addField} = this;
 30     const {numberOfFields} = this.state;
 31     return (
 32       <div>
 33           <label><u>Fields</u></label>
 34           {listFields(numberOfFields)}
 35           <div id="fieldButtons">
 36             <button id="addField" type="button" onClick={addField}> Add Field </butt    on>
 37             <button id="removeField" type="button"> Remove Field </button>
 38           </div>
 39       </div>
 40     )
 41   }
 42 }

Answer 1

检查一下：这是开始以更正确的方式实现您想要做的事情的关键：

    class FieldSection extends Component{
      constructor(){
        super()
        this.state ={
         allFields: []
        }
      }
      addField = () => {
        this.setState({ allFields: getFieldId()});
      }

      removeField = (id) => {
          //get new array if fields without element you want to delete
          const editedArray = this.state.allFields.filter(num =>  num !== id)
          this.setState({allFields: editedArray})
      }

      render () {
         var fields = [];
         for(var i=0; i<this.state.allFields; i++){
            fields.push(<Field key={allFields[i]} id={allFields[i]} 
                          deleteAction = (id)=> this.removeField(id)/>)
         }
         return (
           <div>
             <label><u>Fields</u></label>
             {fields}
             <div id="fieldButtons">
               <button id="addField" type="button" onClick={addField}>Add Field </button>
               <button id="removeField" type="button"> Remove Field </button>
             </div>
           </div>
          )
      }
    }
    //********Field Component************//

    class FieldSection extends Component{
      render() {
         return (
             <div>
                <div id={this.props.id}>My field</div>
                <div onClick={()=> this.props.deleteAcion(this.props.id}>Delete field</div>
             </div>
         )
      }
    }