小编Nee*_*uza的帖子

我想在 div 元素离开焦点后执行一个功能。

我在 div 中使用 tabIndex 和 onBlur 函数。当我通过单击 div 内的任何元素手动放置焦点时，它工作正常。但是默认情况下，当在 div 内没有单击任何项​​目时，它不起作用。

我的组件是一个功能组件 & div 是动态呈现的，所以我也无法使用 useRef 设置焦点。

const renderHeaderCell = (header, headerKey) => {
    return (
      <div className="DataTable__header-cell-wrapper">
        {filterable ? (
          <IconButton onClick={() => toggleFilterPanel(headerKey)}>
            <i className="material-icons">filter_list</i>
          </IconButton>
        ) : null}
        {activeFilterHeader === headerKey ? (
          <div
            tabIndex={0}
            onFocus={e => {
              console.log("DIV", "focus");
            }}
            onBlur={e => {
              console.log("DIV", "blur");
            }}
            style={{ border: "1px solid blue" }}
          >
            DIV container
            <input
              type="text"
              onFocus={e => {
                console.log("input", "focus");
              }} …

我想在父组件中更改道具后在子组件中执行一个函数，而不必管理子/父中的额外状态。

<ParentCompoenent 
  myCallback={() => {}}
  myList={['a','b','c']}
/>

子组件.js

componentWillReceiveProps(nextProps) {
  console.log(this.props.myList, '==', nextProps.myList);  // Outputs ['a','b','c'] == ['a','b','c']
}

当我试图控制 componentWillReceiveProps 中的 nextProps 时，即使在更改道具后，它每次都会给出相同的结果。