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不是删除项目的函数

2 个答案: