logo标签列表

如何在React函数式组件中使用bind? .bind(this)无效

javascriptreactjsbabeljs
3

为什么在setTimeout中调用setState函数时，它没有被绑定？

我在下面添加了一个Codepen，我已经在JavaScript中尝试过相同的代码，它可以正常工作。

<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 (React 示例) https://codepen.io/anon/pen/oJZerP?editors=1111 (JavaScript 示例)

4个回答
1

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

1
你可以使用箭头函数代替普通函数，因为普通函数会获取全局的 this 引用，但当我们使用箭头函数时，它会获取定义它的上下文引用。 或者，如果你仍想使用普通函数，你可以在添加或更新函数时使用 .bind 绑定你的状态。
1

这对我有用

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>
)

}

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接