移除 react.js 中的 DOM，

Question

用户单击 x 时如何删除项目？ 将 id 传递给 parent 并使用 filter()？ 在 jquery 中，我可以只使用 remove()，仅此而已。 反应很新，需要指导。

 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>

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

Answer 1

检查小提琴：

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()作为道具传递并使用 id 调用remove() onClick 并应用过滤器..

希望有帮助！

Answer 2

例如，您需要使用 react-dom；

import { unmountComponentAtNode } from 'react-dom';

onDismiss(node) {
  unmountComponentAtNode(node);
  document.body.removeChild(node);
}

Answer 3

如果您正在创建一个无状态组件并将 props 作为参数传递，则不能使用“this.props”

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>
)};

Answer 4

React 就是操纵状态来触发 DOM 的重新渲染。 与像在 jQuery 中那样从 DOM 中任意删除元素不同，您应该通过从 props.items 中过滤掉项目来更新状态，这将触发 DOM 的重新渲染并删除项目。 这样，即使在任何后续重新渲染之后，该项目仍会从 DOM 中删除 - 而使用 document.removeChild() 或 unmountComponentAtNode() 项目将在随后的重新渲染后重新出现（理论上，我还没有亲自测试过）。

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={() => 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((prev) => {
       ...state,
       items: prev.items.filter((item) => item[id] !== id)
    })
  }
  render(){
    return(
      <RenderItem items={this.state.items} remove={this.remove} />
    ) 
  }
})


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

如果您不想从 props.items 中删除该项目，则为每个项目添加类似 isCompleted 键的内容。 通过将项目的 isCompleted 键切换为 true 来更新状态，并让 DOM 仅呈现 isCompleted === false 的项目。

import React from 'react';
const RenderItem = (props) => {
    return(
      <ul id="todo">
      {props.items.map((item,i) => {
            item.isCompleted === false && (
                <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", isCompleted: false },
        {id:2, name:"Jump", isCompleted: false },
        {id:3, name:"Racing", isCompleted: false }
      ],
      editing: false
    }
  },
  edit(){
    this.setState({editing: true})
  },
  save(){
    this.setState({editing: false})
  },
  remove(id){
    this.setState((prev) => {
       ...state,
       items: prev.items.map(item => (item.id === id ? Object.assign({}, item, { isCompleted: true }) : item))
    })
  }
  render(){
    return(
      <RenderItem items={this.state.items} remove={this.remove} />
    ) 
  }
})


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

或者，您可以将删除的项目存储在新数组中。

Answer 5

在我的情况下，我使用了 useEffect 并且工作得很好。

像这样：

const [clients, setClient] = useState([]);

useEffect(() =>{getData();},[clients]);

我有一个删除函数来删除数据库中的元素，当客户端数组发生变化时，getData 被触发并自动更新 DOM。