kzen.dev
Lebih
Question

ReactJS cara menghapus item dari daftar

Saya memiliki kode yang membuat elemen <li>. Saya perlu menghapus elemen satu per satu dengan mengklik. Untuk setiap elemen saya memiliki Tombol Hapus. Saya mengerti bahwa saya membutuhkan beberapa fungsi untuk menghapus item berdasarkan id. Bagaimana cara melakukan fungsi ini untuk menghapus elemen di ReactJS? Kode saya:

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>
        );
    }
}
Pemrograman
javascript
reactjs
ecmascript-6
Solution / Answer

Anda mengelola data di komponen Parent dan merender UI di komponen Child, jadi untuk menghapus item dari komponen child Anda perlu mengoper fungsi bersama dengan data, panggil fungsi itu dari child dan berikan pengenal unik item daftar, di dalam komponen parent hapus item menggunakan pengenal unik itu.

Langkah1: Oper sebuah fungsi dari komponen induk bersama dengan data, seperti ini:

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

Langkah2: Tentukan fungsi delete di komponen induk seperti ini:

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

Langkah3: Panggil fungsi tersebut dari komponen anak menggunakan 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>
        );
    }
}

Periksa contoh kerja ini:

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'/>
Community
Community
Jawaban edit 22 April 2019 в 4:55
26
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev
Related communities 4
JavaScript Indonesia
16 606 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn
ReactJS Indonesia
13 155 pengguna
Website: https://reactjs.id Roadmap: http://bit.ly/roadmapReact Grup Terkait: * JavaScript ID: https://t.me/js_id * React Native ID: @reactnativeindo Pembahasan OOT di luar React & JavaScript: * Software Engineer ID: https://t.me/soft_eng_id
[archived] React Native Indonesia
8 822 pengguna
React Native Indonesia informasi : https://telegra.ph/React-Native-ID-12-05 React Js Indonesia https://t.me/react_idn For global group : @Reactnativeglobal ReactJS : @react_id
ReactJs Indonesia
95 pengguna
ReactJs telegram group for learn and for expert to share their knowledge