如何在反应功能组件中绑定？ .bind(this) 不工作答案

【问题标题】：how to bind in react functional component ? .bind(this) not working如何在反应功能组件中绑定？ .bind(this) 不工作
【发布时间】：2018-12-21 14:38:42
【问题描述】：

这在 setTimeout 中没有绑定，我在其中调用 setState 函数，为什么会发生这种情况？

我在下面添加了codepen，我在js中尝试过相同的代码，它可以工作

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
</head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

    <script type="text/babel">
      const state = { 
        eventCount: 0,
      }

      function setState(newState) {
        Object.assign(state, newState);
        render();
      }

      setTimeout(
        function() {
          this.setState({eventCount: 666});
        }
        .bind(this),
        1000
      );



      function App() {
        return (
          <div>
            <p>
              There have been {state.eventCount} events.
            </p>
          </div>
        )
      }


      function render() {
        ReactDOM.render(<App/>, document.getElementById('root'));
      }
      render();


    </script>
  </body>
</html>

https://codepen.io/anon/pen/gZgQWX?editors=1011（反应） https://codepen.io/anon/pen/oJZerP?editors=1111（js示例）

【问题讨论】：

标签： javascript reactjs babeljs

【解决方案1】：

功能组件没有状态（至少在即将到来的钩子功能之前没有）。没有可供您调用的 setState 方法。在当前的 React 中，如果要使用状态，则需要使用类组件，而不是功能组件。

【讨论】：

【解决方案2】：

您可以使用箭头函数代替普通函数，因为普通函数采用this 的全局引用，但当我们使用箭头函数时，它采用定义它的引用。或者，如果您想使用普通功能，您可以在添加或更新功能时.bind您的状态。

【讨论】：

【解决方案3】：

现在您将函数绑定到窗口上下文。将 setTimeout 放在 App 函数中，这样 'this' 将绑定到 App 实例。

【讨论】：

【解决方案4】：

这对我有用

function TodoItems(props) {

let getStyle = () => {
    return {
        background: '#f4f4f4',
        padding: '10px',
        borderBottom: '1px #ccc dotted',
        textDecoration: props.todo.completed ?
        'line-through' : 'none'
    }
}

function markComplete(){
    console.log(props.todo);
}

return (
    <div style={getStyle()}>
        <input type="checkbox" onChange={markComplete.bind(markComplete)} /> {' '}
        <p>{props.todo.title}</p>
    </div>
)

}

【讨论】：