如何在Reactjs中绑定具有参数的构造函数中的函数

Question

So here's my function:

remove(element)
{   
    this.setState({ search: this.state.search.filter( item => item !== element ) }); 
}  

I get this error:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). 
Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

If I have it set up like this:

constructor()
{
    this.remove = this.remove.bind(this);
}
render() 
{   
    return (
        <div>
            { this.state.search.map( (item, index) =>  
                (   
                    <button key={index} onClick={this.remove(item)}>{item.search}: {item.text}</button>
                ))  
            }   
            </div>
        </div>
    );
}

But if works fine if I remove the binding (well doesn't really matter) from the constructor and change the button line to this:

<button key={index} onClick={this.remove.bind(this, item)}>{item.search}: {item.text}</button>

So my question is, is there a way to bind it in the constructor so that it can take on the parameter?

Answer 1

The difference between this.remove(item) and this.remove.bind(this, item) is that the first calls the function while the second creates a new function.

So my question is, is there a way to bind it in the constructor so that it can take on the parameter?

You can use this.remove.bind(this, item) and perform the binding the constructor, though it is unnecessary.

If you want to pass item to the event handler, then you have to create a new function in .map that can access item , with your current setup. This can be done via .bind or via a closure. In either case, binding in the constructor is simply not necessary.

You can only avoid creating a new function if provide item in a different way, eg wrapping the button with another component that takes item as a prop (therefore pushing the function creation further down):

function Button({item, onClick}) {
  return <button onClick={() => onClick(item)}>{item.search}: {item.text}</button>;
}

class Component extends React.Component {
  constructor()
  {
      this.remove = this.remove.bind(this);
  }

  render() 
  {   
      return (
          <div>
              { this.state.search.map( (item, index) =>  
                  (   
                      <Button key={index} onClick={this.remove} item={item} />
                  ))  
              }   
              </div>
          </div>
      );
  }
}