web-dev-qa-db-fra.com

ReactJS comment supprimer un élément de la liste

J'ai un code qui crée <li> éléments. Je dois supprimer les éléments un par un en cliquant. Pour chaque élément, j'ai Delete button. Je comprends que j'ai besoin d'une fonction pour supprimer des éléments par id. Comment faire cette fonction pour supprimer des éléments dans ReactJS? Mon code:

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>
        );
    }
}
javascriptreactjsecmascript-6
9
Denys

Vous gérez les données dans le composant parent et rendez l'interface utilisateur dans le composant enfant.Par conséquent, pour supprimer l'élément du composant enfant, vous devez transmettre une fonction avec les données, appeler cette fonction depuis l'enfant et transmettre tout identificateur unique de l'élément de liste, à l'intérieur du composant parent. supprimez l'élément à l'aide de cet identifiant unique.

Step1: Passez une fonction du composant parent avec des données, comme ceci:

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

Step2: Définissez la fonction delete dans le composant parent comme ceci:

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

Step3: Appelez cette fonction depuis le composant enfant en utilisant 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>
        );
    }
}

Vérifiez cet exemple de travail:

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'/>
26
Mayank Shukla