我开始学习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>
    );
  }
}

最佳答案

您需要调用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>);
  }
}


让我知道您是否需要进一步的解释。来自与您的问题有关的Reactjs网站的Here's an example

关于javascript - React.js将状态作为 Prop 传递给 child ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52950204/

10-12 15:10
查看更多