Question

如何将setthis回调与“ this”绑定。反应允许吗？

this.state = {
    selectedId: null,
}

//On click of some list item as

<ListGroup.Item 
  action href="" 
  key={id}
  onClick={()=>
    this.setState({selectedId: id.ID}), () => console.log(this.state.selectedID)
  }
>
  LIST ITEM
</ListGroup.Item>)

Answer 1

您需要绑定onClick而不是setState，以便在绑定的onClick调用setState时，它可以“提供”此内容以进行呼叫。在React类组件中，像onClick这样的处理程序都绑定在构造函数中：

class BindingExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedId: null }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState( prevState => (...prevState, { selectedId: id.ID }),
                   () => console.log(this.state.selectedID)
                 );
  }

  render() {
    return (
      <>
        <button onClick={this.handleClick}>
         Click me
        </button>
      </>
    );
  }
}

如果onClick被实现为粗箭头功能

handleClick = () => {
   this.setState( prevState => (...prevState, { selectedId: id.ID }),
                   () => console.log(this.state.selectedID)
                );
}

那么就不需要绑定它了，因为粗箭头功能总是可以捕获它。附带说明一下，类组件目前在React中已经过时了。

Answer 2

您在此处错误地实现了callback中的setState，

onClick={()=>
  this.setState({selectedId: id.ID}), () => console.log(this.state.selectedID)
}

您的setState本身在这里结束，

this.setState({selectedId: id.ID})   //This is complete setState

如果要将callback添加到setState，则需要将其写在setState内，

onClick={()=>
  this.setState({
     selectedId: id.ID
  }, () => console.log(this.state.selectedId)   //This is callback
  ) //end of setState
} //end of onClick

注意：您正在打印this.state.selectedID，但在状态下您有selectedId。

Demo

Answer 3

运行内联回调箭头功能时，无需绑定this。

您的代码存在问题，因为您有2个功能

onClick={()=> this.setState({selectedId: id.ID})
//// this line is wrong
, () =>
////
console.log(this.state.selectedID)}

将您的onClick代码更改为此：

onClick={()=> {
        this.setState({selectedId: id.ID}); 
        console.log(this.state.selectedID)
    }
}

这似乎也是错误的。

this.state = {
    selectedId: null,
}

将其更改为此：

state = {
    selectedId: null,
}

希望这会有所帮助。

如何使用setState回调绑定“ this”

3 个答案: