jquery vs react.js 从列表中删除项目

Question

 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"} ] } }, remove(id){ this.setState({ items: this.state.items.filter((el) => id !== el.id) }) }, render(){ return( <RenderItem items={this.state.items} remove={this.remove}/> ) } }) ReactDOM.render( <TodoItems />, document.getElementById('container') );

 <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script> <script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>

I'm confused how stuff work here in react.js, I need presduo code how to passing work. I was from jquery background, it's so straight forward, just get the right dom and do $(this).remove(), while in react I'm confused.

<button className="btn btn-sm btn-primary" onClick={() => props.remove(item.id)}>X</button>

When you click what happened? arrow function for? and where does the remove come from?

Answer 1

React follows unidirectional data binding , which means, the data will flow in a single direction. So, the data is stored in a state . Whenever the state changes the component will re-render . A state can be changed at any point in time. But, mostly it will be changed on any action . In your case the action in onClick() . This will call the function will the id of the element which triggered the onClick() . Now, in that function, you will iterate through the state , identify, remove and set the new state using setState() which will re-render the component with the new data. This render will not have the clicked element as it was removed from the state.

The remove() function is passed on to the child component from the parent component which can be accessed using props . This will be a reference to the function declared in the parent component. During the click, using this reference, the function in the parent component will be called!

Answer 2

In react, components are rendered based on their props and state . props are passed from the parent component, and a component may or may not have internal state .

Using jQuery, you would try to remove it by removing the DOM node directly. However, in react, interacting with the DOM directly is an anti-pattern. Since the current state and props determines what is rendered, you want to change one of those that will cause a re-rendering and display something new.

In your case, it looks like you're trying to modify props directly. props are read only and should not be modified. Since props are passed down from the parent component, you would have to change what's being passed down from the parent. There are a few ways you can do that, such as passing a callback function defined in the parent component as a prop that can make such a change. But for this example, it might be easier/more applicable to use state .

Remember, you want to change the component's state to reflect what you want to see (what you want to render ). So let's say you have an array called items in your component's state . And let's say you are

class ListDemo extends React.component {
  constructor() {
    super()

    // initialize state
    this.state = {
      items: ['thing1', 'thing2', 'thing3']
    }
  }

  onClick(index) {
    // newItems is a new array with the element at the given index removed
    // this logic doesn't handle edge cases, but that's besides the point
    const newItems = [
      ...this.state.items.slice(0, index),
      ...this.state.items.slice(index + 1)
    ]

    // here we set this component's state's items to 
    // the new state with what we want removed.
    // it will then re-render the component to reflect the new state
    this.setState({
      items: newItems
    })
  }

  render() {
    return (
      <div>
        {
          // here we render buttons for each item in the component's state's items
          // we use `onClick` to make it so that clicking the button
          // will remove it from the list
          this.state.items.map((item, index) => {
            return (
              <button 
                onClick={() => this.onClick(index)}
                key={`${item}${index}`}
              >
                {item}
              </button>
            )
          })
        }
      </div>
    )
  }
}

Let's go over what is happening in this example. First, when the component is created, it's initial state is set with an items array that contains 3 elements. When it is first rendered, it will create a button for each element in the items array. Notice that what is rendered is purely determined by the state .

Each button also has a callback that is called when it's clicked (set by onClick ). This callback is what will remove that specific element from the items array and then update the component's state to have a new items array without the element that was just removed. This in turn causes a re-rendering, which uses the new items array to display the buttons. This time around, the button we removed by click it is no longer there since it's no longer in this.state.items .

That is one of the key concepts of react - components are rendered based on their props and state , and changing either will update what is displayed.

As for why to use an arrow function, it's because it will automatically bind the this value to the ListDemo component. Similarly, you can use something like onClick={this.onClick.bind(this)} . Doing this is necessary since the value of this when clicking the button isn't guaranteed to what you expect. Reading this might make it more clear.