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

javascript - Why this.state is not working in render() - Stack Overflow

programmeradmin0浏览0评论

I am new to ReactJs.I tried a small snippet with React.But this.state is not working in ES6 ReactJs.Help me what I am missing!!

JS without ES6:

 var App = React.createClass({
      getInitialState: function() {
        return {value:''};
      },

      handleClick: function(e){
        this.setState({value:e.target.value});
        console.log(this.state.value);//getting value here
      },
      render: function() {
        return(
          <div>
            Hello {this.props.name}
            <input type="text" onChange={this.handleClick}/>
            {this.state.value}// no value
          </div>);
      }
    });
    React.render(<App name="Praveen" />, document.getElementById('content'));

This case is working fine. Jsbin code

JS with ES6:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={value:''};
  }
  handleClick(e){
    this.setState({value:e.target.value});
    console.log(this.state.value);//getting value here
  }
  render() {
    return(
      <div>
        Hello {this.props.name}
        <input type="text" onChange={this.handleClick}/>
        {this.state.value}// no value
      </div>);
  }
}
React.render(<App name="Praveen" />, document.getElementById('content'));

In this case whenever I am setting this.setState() render function is not called. Jsbin code

I am new to ReactJs.I tried a small snippet with React.But this.state is not working in ES6 ReactJs.Help me what I am missing!!

JS without ES6:

 var App = React.createClass({
      getInitialState: function() {
        return {value:''};
      },

      handleClick: function(e){
        this.setState({value:e.target.value});
        console.log(this.state.value);//getting value here
      },
      render: function() {
        return(
          <div>
            Hello {this.props.name}
            <input type="text" onChange={this.handleClick}/>
            {this.state.value}// no value
          </div>);
      }
    });
    React.render(<App name="Praveen" />, document.getElementById('content'));

This case is working fine. Jsbin code

JS with ES6:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={value:''};
  }
  handleClick(e){
    this.setState({value:e.target.value});
    console.log(this.state.value);//getting value here
  }
  render() {
    return(
      <div>
        Hello {this.props.name}
        <input type="text" onChange={this.handleClick}/>
        {this.state.value}// no value
      </div>);
  }
}
React.render(<App name="Praveen" />, document.getElementById('content'));

In this case whenever I am setting this.setState() render function is not called. Jsbin code

Share Improve this question edited May 3, 2018 at 4:07 Yangshun Tay 53.2k33 gold badges123 silver badges150 bronze badges asked Sep 29, 2015 at 17:32 Praveen RajPraveen Raj 1,0141 gold badge8 silver badges12 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 5

React in ES6 removed auto binding of this which means that functions declared on a class that extends React.Component must either .bind(this) explicitly or use arrow function syntax.

<input type="text" onChange={this.handleClick.bind(this)} />

or

class App extends React.Component {
   handleClick = (e) => {}
}

For performance reasons, it is remended to do the binding in the constructor instead so that the binding only happens upon initialization instead of on every render.

Read more about event handlers on React docs here.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value:''};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({value:e.target.value}, () => {
      console.log(this.state.value); // Updated value here
    });
  }

  render() {
    return(
      <div>
        Hello {this.props.name}
        <input type="text" onChange={this.handleClick}/>
        {this.state.value}// no value
      </div>
    );
  }
}
发布评论

评论列表(0)

  1. 暂无评论