Reactjs pass state as props to child

Question

I Started to learn React. I've seen the tutorial of react website https://reactjs.org/docs/hello-world.html and still, sometimes all the props idea doesn't work for me.

my program is crashing and the error message is :

why its happening? someone can help me, please?

TypeError: Cannot read property 'handleSetColor' of undefined onSetColor 8 | class ColorDisplay extends Component { 9 | 10 | onSetColor(newColor) {

11 | this.handleSetColor(newColor); 12 | }

import React, { Component } from 'react';
import './App.css';
import _ from 'underscore';
import PropTypes from 'prop-types';



class ColorDisplay extends Component {

  onSetColor(newColor) {
    this.props.handleSetColor(newColor);
  }

  render() {
    return (<p>
        <input type="color" value={this.props.val} onChange={this.onSetColor} />
      </p>);
  }
}


ColorDisplay.propTypes = {
  handleSetColor: PropTypes.func,
  val: PropTypes.string,
};


function TextDisplay(props) {
  return <input type="text" value={props.val} readOnly={true} />
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showColorDisplay: true,
      showTextDisplay: true,
      val: '#ffff00',
    }
  }

  randomizeColor = (e) => {
    this.setState(oldState => ({
      val: _.sample(['#ffff00', '#ff00ff', '#abff01', '#10f100', '#3030ff', '#ddcc10']),
    }));
  }

  toggle(val) {
    this.setState(oldState => ({ [val]: !oldState[val] }));
  }

  setColor(newColor) {
    this.setState({ val: newColor });
  }

  toggleColorDisplay = (e) => {
    this.toggle('showColorDisplay');
  }

  toggleTextDisplay = (e) => {
    this.toggle('showTextDisplay');
  }

  render() {
    return (
      <div className="spaced">
        <h1>HELLO</h1>
        <button onClick={this.randomizeColor}>Shuffle</button><br />
        <label>
          <br />
          <input type="checkbox" checked={this.state.showColorDisplay} onChange={this.toggle.bind(this, 'showColorDisplay')} />
          Color Display
        </label>
        <label>
          <input type="checkbox" checked={this.state.showTextDisplay} onChange={this.toggle.bind(this, 'showTextDisplay')} />
          Text Display
        </label>

        <div className="spaced">
          {this.state.showColorDisplay && <ColorDisplay val={this.state.val} handleSetColor={this.setColor} />}
        </div>
        <div className="spaced">
          {this.state.showTextDisplay && <TextDisplay val={this.state.val} />}
        </div>

      </div>
    );
  }
}

Answer 1

You need to call the Component constructor and bind the scope of onSetColor :

class ColorDisplay extends Component {
  constructor(props) {
      // This calls the constructor for React.Component
      super(props);

      // you also need to explicitly bind the scope
      this.onSetColor = this.onSetColor.bind(this);
  }

  onSetColor(newColor) {
    this.props.handleSetColor(newColor);
  }

  render() {
    return (<p>
        <input type="color" value={this.props.val} onChange={this.onSetColor} />
      </p>);
  }
}

Let me know if you need any further explanation. Here's an example from the Reactjs site that has to do with your issue.

Answer 2

我现在无法复制问题，但是为了以防万一，我会尝试将该方法绑定到Color Display。