反应从父组件更新孩子的状态

Question

When chartValue: true an object appears on the chart.

class Chart extends Component {
  constructor(props) {
    super(props);

     this.state = {
       chartValue: false,
     };
   }

  componentWillReceiveProps(nextProps) {
    this.setState({
      chartValue: nextProps.chartValue
    });
  }

  render() {
    return (
      <div>{this.state.chartValue}</div>
    );
  }
}

I want to change the value to true via a button in my app component.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = ({
       chartValue: false,
    });
  }

  callChartValue() {
    this.setState({
      chartValue: true
    })
  }

  render() {
    return (
       <div>
         <button onClick={this.callChartValue}>call</button>
         <Chart chartValue={this.state.chartValue} />
       </div>
    )}
  }
}

It seems like changing the state in my App.js doesnt translate to a change in the state of the chart component. I've tried without using componentWillReceiveProps but it hasn't worked either.

Answer 1

You have two main issues in your code:

1. You should bind your methods

Otherwise, you won't have access to this inside them.

constructor(props) {

  ...

  // Add this to your constructor
  this.callChartValue = this.callChartValue.bind(this);

  ... 
}

2. You shouldn't use strings for referencing the methods

render() {
  return (

    ...

     // Wrong
     <button onClick="callChartValue">call</button>

     // Right
     <button onClick={this.callChartValue}>call</button>

    ...

)}