Question

我的代码由父（显示）和子（可编辑）组件组成。 Parent包含一个数组，其中推送了Child元素。为了清楚起见，我附上了截图。

我正在尝试使用splice（）删除Child（数组元素）。我在拼接数组时获得正确的输出。屏幕截图中的示例如果我要删除＆＃34; new＆＃34;从数组我的数组arr = [dat2，dat3]，但在前端最后一个元素被删除，它以下面显示的方式显示dat2，new。点击make changes我按需要得到dat2和dat3。我使用正确的索引完成了拼接但是它似乎并没有在UI中进行核心工作。

请帮忙。我几乎尝试过所有事情:(

我只是转发所需的功能。

家长代码：

handleMinus(id,idShow){

  this.state.Example=this.props.result.examples
  this.state.Example.splice(id,1);  
  this.props.result.examples=this.state.Example;
  this.setState({create:!this.state.create})


};

    render() { 
    var showExm = this.props.result.examples.map(function(result,index){
            console.log("EditableIntents")
            return <div key={index}><EditableIntents
                                    handleMinus={that.handleMinus}
                                    result={result}
                                    indexEg={index}
                                    indexShowInt={that.props.index}
                                    editExample={that.editExample}/>
                          </div>
            });
    return({showExm});
}

子：

render() { 
    return(
      <div>
      <TextField
              defaultValue={this.props.result}
              hintText={this.props.result}
              onChange= {this.changeEg}
              id="editText"
            />
            <span><IconButton id={"aa"+1} onClick={this.handleMinus} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span>
            </div>
          )
   }

 handleMinus(){
     console.log(this.props.indexEg);
    console.log("in Grand child:",this.props.result,this.props.indexEg);
    this.props.handleMinus(this.props.indexEg,this.props.indexShowInt)
   }

Answer 1

您的索引可能存在问题

孩子：

render() {

    return(
      <div>
      <TextField
              defaultValue={this.props.result}
              hintText={this.props.result}
              onChange= {this.changeEg}
              id="editText"
            />

/* I have just changed here your onClick function */

            <span><IconButton id={"aa"+1} onClick={() => this.handleMinus(index)} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span>


            </div>
          )

   }

/*and here I have added parameter */

 handleMinus(keyid){
     console.log(this.props.indexEg);
    console.log("in Grand child:",this.props.result,this.props.indexEg);
    this.props.handleMinus(keyid,this.props.indexShowInt)
   }

Also you should define "this.state.Example" as array

handleMinus(id,idShow){

this.state.Example = [];

  this.state.Example=this.props.result.examples
  this.state.Example.splice(id,1);  
  this.props.result.examples=this.state.Example;
  this.setState({create:!this.state.create})
};

它可能对你有帮助。

JS拼接无法正常删除React Component

1 个答案: