node.js - TypeError : this. props.delItemRow 不是删除项目的函数

Question

我花了一整天的时间尝试了各种方法，但都是徒劳。我正在学习 React 如何使工作成为删除功能，但随后却徒劳无功。一个简单的待办事项列表，其中删除不起作用。我不知道我哪里做错了。

这里是js文件:display和addList，这是display的父文件。使用 props 父函数不会被调用。

显示.js

      class DisplayList extends Component{   
  delRow(en){
    this.props.delItemRow(en);
  } 
render(){
return(

//  console.log("check"+this.props.list),
    <div>
    <h4>DisplayList</h4>
     <ul>
        {this.props.list.map((item)=>(<li key={item}>{item} <button  onClick={this.delRow.bind(this,item)}>D</button> </li>))}
     </ul>
    </div>
    );} }

  export default DisplayList;

addlist.js

 class AdList extends Component{
constructor(props){
  super(props);
  this.state={value:'',disArrList:[]}
  this.handleChange=this.handleChange.bind(this);
  this.handleSubmit=this.handleSubmit.bind(this);
  this.delItemRow=this.delItemRow.bind(this);
  this.updateItemRow=this.updateItemRow.bind(this);
}
    delItemRow(itemName)
{this.setState({disArrList:this.state.disArrList.filter(e1=>e1!==itemName)};
}
handleChange(e){
    this.setState({value:e.target.value});
}
handleSubmit(e){
    e.preventDefault();
    //alert("submit"+this.state.value);
    let mycolletion=this.state.disArrList.concat(this.state.value);
    this.setState({disArrList:mycolletion});
}    
   render(){
    return(
        <div>
            <div className="Todo">
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    <input type="submit" value="Add" />
                </form>
            </div>
            <div>
               <DisplayList  list={this.state.disArrList} removeItem={this.delItemRow} updateItem={this.updateItemRow}/>
            </div>
        </div>
        );}} 
    export default AdList;

谢谢您的帮助，我们将不胜感激

Answer 1

您传递的 Prop 称为removeItem，因此您必须在代码片段中更改它。

display.js

delRow(en){
  this.props.removeItem(en);
}

render(){
  return(
    <div>
      <ul>
       {this.props.list.map((item)=>(<li key={item}>{item} <button  onClick={this.delRow.bind(this,item)}>D</button> </li>))}
      </ul>
    </div>
  );
}