TypeError: this.props.delItemRow is not a function for deleting item

Question

我花了一天的时间想尽一切办法，但都没有成功。我正在学习 React 如何使工作成为删除功能，但后来徒劳无功。一个简单的待办事项列表，其中删除不起作用。我不知道我哪里做错了。

这里是 js 文件：display 和 addList，它是显示的父级。使用 props 不会调用父函数。

display.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

您传递的道具名为 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>
  );
}

Answer 2

在 addlist.js 中，您将 this.delItemRow 作为 removeItem 传递给道具，所以在 display.js 中，您可以使用 this.props.removeItem

访问 delItem

如果你想访问它，在display.js中使用this.props.delItem你可以简单地把它改成:

<DisplayList  list={this.state.disArrList} delItemRow={this.delItemRow} updateItem={this.updateItemRow}/>

TypeError: this.props.delItemRow is not a function for deleting item

TypeError: this.props.delItemRow is not a function for deleting item

node.js

npm

reactjs

webpack

babel-loader