javascript - 移除 react.js 中的 DOM，

Question

如何在用户单击 x 时删除该项目？将 id 传递给父级并使用 filter()？在 jquery 中，我可以只使用 remove()，仅此而已。非常新的 react ，需要指导。

import React from 'react';

const RenderItem = (props) => {
    return(
      <ul id="todo">
      {props.items.map((item,i) => 
        <li className='list-group-item' data-id={item.id} key={i}>{item.name}
        <button className="btn btn-sm btn-primary onClick={}">X</button>
        </li>
      )}
      </ul>
    ) 
};

const TodoItems = React.createClass({
  getInitialState() {
    return {
      items: [
        {id:1,name:"Gym"},
        {id:2,name:"Jump"},
        {id:3,name:"Racing"}
      ],
      editing: false
    }
  },
  edit(){
    this.setState({editing: true})
  },
  save(){
    this.setState({editing: false})
  },
  remove(id){
    //return this.items.filter((item,i) => item.id !== id)
  }
  render(){
    return(
      <RenderItem items={this.state.items} />
    ) 
  }
})


ReactDOM.render(
  <TodoItems />,
  document.getElementById('container')
);

<div id="container">
</div>


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

这是我在 fiddle 上的代码 https://jsfiddle.net/3mn105sj/ ，我不知道为什么我在这里没有使用 react 。

Answer 1

检查 fiddle :

https://jsfiddle.net/zp5oqnsh/1/

const RenderItem = (props) => {
    return(
      <ul id="todo">
      {props.items.map((item,i) => 
        <li className='list-group-item' data-id={item.id} key={i}>{item.name}
        <button className="btn btn-sm btn-primary" onClick={() => props.remove(item.id)}>X</button>
        </li>
      )}
      </ul>
    ) 
};

const TodoItems = React.createClass({
  getInitialState() {
    return {
      items: [
        {id:1,name:"Gym"},
        {id:2,name:"Jump"},
        {id:3,name:"Racing"}
      ],
      editing: false
    }
  },
  edit(){
    this.setState({editing: true})
  },
  save(){
    this.setState({editing: false})
  },
  remove(id){
  this.setState({
    items: this.state.items.filter((el) => id !== el.id)
  })
    //return this.items.filter((item,i) => item.id !== id)
  },
  render(){
    return(
      <RenderItem items={this.state.items} remove={this.remove}/>
    ) 
  }
})


ReactDOM.render(
  <TodoItems />,
  document.getElementById('container')
);

将 remove() 作为 props 传递，并使用 id 调用 remove() onClick 并应用过滤器..

希望对您有所帮助!