ReactJS如何从列表中删除项目

Question

我有一段创建<li>元素的代码。我需要通过单击一个一个地删除这些元素。对于每个元素，我都有一个删除按钮。我知道需要编写一些函数根据id删除项目。如何在ReactJS中编写此类函数以删除元素？

class TodoApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {items: [], text: ''};
    }

    render() {
        return (
            <div>
                <h3>TODO</h3>
                <TodoList items={this.state.items} />
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.state.text} />
                    <button>{'Add #' + (this.state.items.length + 1)}</button>
                </form>
            </div>
        );
    }

    handleChange(e) {
        this.setState({text: e.target.value});
    }

    handleSubmit(e) {
        e.preventDefault();
        var newItem = {
            text: this.props.w +''+this.props.t,
            id: Date.now()
        };
        this.setState((prevState) => ({
            items: prevState.items.concat(newItem),
            text: ''
        }));
    }

    delete(id){          // How that function knows id of item that need to delete and how to delete item?
        this.setState(this.item.id)
    }
}

class TodoList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <li key={item.id}>{item.text}<button onClick={this.delete.bind(this)}>Delete</button></li>
                ))}
            </ul>
        );
    }
}

- Denys

Answer 1

您正在管理父组件中的数据并在子组件中呈现UI，因此要从子组件中删除项目，您需要将一个函数与数据一起传递，从子组件中调用该函数，并传递列表项的任何唯一标识符，在父组件内使用该唯一标识符删除该项。

步骤1：像这样从父组件中传递一个带有数据的函数：

<TodoList items={this.state.items} _handleDelete={this.delete.bind(this)}/>

步骤2：在父组件中定义delete函数，如下所示：

delete(id){
    this.setState(prevState => ({
        data: prevState.data.filter(el => el != id )
    }));
}

步骤3：在子组件中使用this.props._handleDelete()调用该函数：

class TodoList extends React.Component {

    _handleDelete(id){
        this.props._handleDelete(id);
    }

    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <li key={item.id}>{item.text}<button onClick={this._handleDelete.bind(this, item.id)}>Delete</button></li>
                ))}
            </ul>
        );
    }
}

请查看这个可工作的示例：

class App extends React.Component{
   constructor(){
      super();
      this.state = {
        data: [1,2,3,4,5]
      }
      this.delete = this.delete.bind(this);
   }
   
   delete(id){
      this.setState(prevState => ({
          data: prevState.data.filter(el => el != id )
      }));
   }
   
   render(){
      return(
          <Child delete={this.delete} data={this.state.data}/>
      );
   }
}

class Child extends React.Component{

   delete(id){
       this.props.delete(id);
   }
   
   render(){
      return(
         <div>
           {
              this.props.data.map(el=>
                  <p onClick={this.delete.bind(this, el)}>{el}</p>
              )
           }
         </div>
      )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

- Mayank Shukla

---

它在控制台中给我一个ID。如何删除它？ - Denys

检查更新的答案，添加了从数组中删除项目的功能。 - Mayank Shukla

谢谢你提供的代码示例，你能解释一下 data = data.filter(el => el != id ); 的含义吗？ - Denys

筛选器用于从数组中过滤数据，如果返回true，则将该值放入新数组中，如果返回false，则将忽略该数组值。通过使用filter，我正在检查哪个元素具有相同的id，如果id相同则返回false，否则返回true，查看此链接，它将解释一切：https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter - Mayank Shukla

只是添加一个快速注释：您应该使用“filter”而不是改变状态。 - Adam

你也可以使用<p onClick={this.props.delete.bind(this, el)}>{el}</p>，避免在子组件中创建另一个函数。不过，回答得很好。 - Yuri Cardoso