Question

我开始学习React。我看过React网站的教程 https://reactjs.org/docs/hello-world.html 但是，有时候所有道具的想法对我都不起作用。

我的程序崩溃了，错误消息是：

为什么会这样？有人可以帮我吗？

TypeError：无法读取未定义的属性'handleSetColor' onSetColor 8 | ColorDisplay类扩展了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

您需要调用Component构造函数并绑定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>);
  }
}

如果您需要进一步说明，请告诉我。 Here's an example来自Reactjs网站，与您的问题有关。

Answer 2

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

React.js将状态作为道具传递给孩子

2 个答案: