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/上的代码，我不知道为什么我没有在这里使用反应。

Answer 1

你需要使用react-dom，例如;

import { unmountComponentAtNode } from 'react-dom';

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

Answer 2

如果您正在创建无状态组件并将props作为参数传递，则无法使用＆＃39; this.props＆＃39;

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 3

检查小提琴：

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

将remove()作为道具传递，并使用ID调用remove() onClick并应用过滤器..

希望它有所帮助！

Answer 4

React就是关于操纵状态以触发DOM的重新呈现。与其像在jQuery中那样从DOM中随意删除元素，不如通过从props.items中滤除项目来更新状态，这将触发移除了该项目的DOM的重新呈现。这样，即使在随后进行任何重新渲染之后，该项目仍将从DOM中删除-而对于document.removeChild（）或unmountComponentAtNode（）而言，该项目将在随后的重新渲染之后重新出现（理论上，我还没有亲自测试）。 / p>

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

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

let time = [];
for (let i = 0; i <= 23; i++) {
  /*
   ** padStart function which adds 0 to the start **
   ** to make it two digit if the time is in 1 digit. **
   ** it adds 0 to single digit numbers(1 will become 01, 2 will become 02 etc) **
   */
  let timeString = "";
  timeString += (i + ":00").padStart(2, "0") + ((i < 12) ? " AM - " : " PM - ") + (i + 1 + ":00").padStart(2, "0") + (((i + 1) >= 12) ? " PM " : " AM ");
  time.push(timeString);
}

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

Answer 5

在我的情况下，我使用useEffect并正常工作。

赞：

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

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

我有一个remove函数，该函数删除数据库中的元素，并且当clients数组更改时，将触发getData并自动更新DOM。

在react.js中移除DOM，

5 个答案: