最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to bind in react functional component ? .bind(this) not working - Stack Overflow

programmeradmin3浏览0评论

This is not getting bound in setTimeout, where I call setState function, why is this happening?

I've added codepen bellow, I've tried same code in js, and it works

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
</head>
  <body>
    <div id="root"></div>
    <script src="/[email protected]/umd/react.development.js"></script>
    <script src="/[email protected]/umd/react-dom.development.js"></script>
    <script src="/[email protected]/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>

(react) (js example )

This is not getting bound in setTimeout, where I call setState function, why is this happening?

I've added codepen bellow, I've tried same code in js, and it works

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
</head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg./[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg./[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg./[email protected]/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 (js example )

Share Improve this question asked Dec 21, 2018 at 14:38 NikitaNikita 3251 gold badge7 silver badges14 bronze badges 0
Add a ment  | 

4 Answers 4

Reset to default 1

Functional ponents don't have state (at least not until the uping hooks feature). There is no setState method for you to call. In current react, if you want to use state you need to use a class ponent, not a functional ponent.

You can use the Arrow function in the place of normal function because normal function takes the global reference of this but when we use arrow function it takes the reference where it is defined. Or still, if you wanted to use the normal function you can .bind your state when you add functions or update them.

This worked for me

function TodoItems(props) {

let getStyle = () => {
    return {
        background: '#f4f4f4',
        padding: '10px',
        borderBottom: '1px #ccc dotted',
        textDecoration: props.todo.pleted ?
        '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>
)

}

Now you're binding your function to the window context. Place the setTimeout in the App function so 'this' would be bound to the App instance.

发布评论

评论列表(0)

  1. 暂无评论