reactjs - const 组件无法读取 undefined 的属性，即使它是一个道具？

Question

我有父母吗？托管随机问题和取决于问题类型的不同类型的用户输入的类。

1. 3 个可点击按钮，点击时会改变颜色
2. 一个输入框

class Parent extends Component {
   state = {
   buttonColors: ["white", "white", "white"],
   questionType: 0,
   avg: 0,
   numbers: [],
   answer: "",
   number: 0,
   showAns: false,
   current: "",
   etc....
   }

   // This part basically handles clicking of 3 buttons
   clickedAnswer(userAnswer) {
     // 0 is (>)   //   1 is (=)        1 is (<)
     let colors = this.state.buttonColors;
     let guess = this.state.current;
     if (!guess.includes(1)) {
     //Hasn't Guessed Yet -Action- Select Clicked button
     //Change color of the Guessed button
     colors[userAnswer] = "#d0f0c0";
     guess[userAnswer] = 1;
     } else {
     //Clicked Previous Answer -Action- Unselect Clicked button
     colors = ["white", "white", "white"]; //Reset Colors
     colors[userAnswer] = "#d0f0c0";
     guess = [0, 0, 0]; // Reset Guess
     guess[userAnswer] = 1;
    }

    this.setState({
    current: guess,
    buttonColors: colors,
    });
  }
   
   render() {
      return (
         <RenderInput
                questionType={this.state.questionType}
                answer={this.state.answer}
                buttonColors={this.state.buttonColors}
                clickedAnswer={this.clickedAnswer}
                handleChange={this.handleChange}
                current={this.state.current}
                showAns={this.state.showAns}
                />
      )
   }

然后我在文件底部有一个 const Render，它根据 questionType 动态呈现输入类型。

const RenderInput = (props) => {
    switch (props.questionType){
        case 0: case 1: case 2: case 3:
            return (
                <Row style={{ paddingBottom: "50px", paddingTop: "50px" }}>
                  <Col style={{height: 100, textAlign: "right"}}>
                    <button
                        id="btn1"
                        onClick={() => props.clickedAnswer(0)}
                        style={{
                        width: "200px",
                        height: "80px",
                        backgroundColor:
                            props.showAns && props.answer[0] === 1
                            ? "red"
                            : props.buttonColors[0],
                        }}
                    >
                        <span
                        style={{ fontFamily: "courier", fontSize: "35px" }}
                        >
                            {"Higher"}
                        </span>
                    </button>
                  </Col>

                  <Col style={{ height: 100, textAlign: "center" }}>
                    <button
                    id="btn2"
                    onClick={() => props.clickedAnswer(1)}
                    style={{
                        width: "250px",
                        height: "80px",
                        backgroundColor:
                        props.showAns && props.answer[1] === 1
                            ? "red"
                            : props.buttonColors[1],
                    }}
                    >
                    <span
                        style={{ fontFamily: "courier", fontSize: "35px" }}
                    >
                        {"Unchanged"}
                    </span>
                    </button>
                  </Col>

                  <Col style={{height: 100, textAlign: "left"}}>
                    <button
                        id="btn3"
                        onClick={() => props.clickedAnswer(2)}
                        style={{
                          width: "200px",
                          height: "80px",
                          backgroundColor:
                            props.showAns && props.answer[2] === 1
                              ? "red"
                              : props.buttonColors[2],
                        }}
                    >
                        <span
                          style={{ fontFamily: "courier", fontSize: "35px" }}
                        >
                          {"Lower"}
                        </span>
                    </button>
                  </Col>
                </Row>
            )
        case 4: case 5:
            return (
                <p
                style={{
                  fontSize: 25,
                  textAlign: "center",
                  fontFamily: "courier",
                  fontWeight: "bold",
                  paddingTop: "10px",
                }}
                >
                    <input
                        type="text"
                        value={props.current}
                        onChange={props.handleChange}
                        id="input1"
                        autoComplete="off"
                        maxLength="8"
                        style={{
                        color: !props.showAns ? "black" : "red",
                        fontSize: 55,
                        fontFamily: "courier",
                        fontWeight: "bold",
                        width: "280px",
                        height: "85px",
                        textAlign: "center",
                        }}
                    />
                </p>
            )
    }
}

但是，当我尝试单击按钮更改颜色时，我收到一条错误消息 cannot read property 'buttonColor' of undefined

我该如何解决？我基本上需要孩子？或 const 组件将操作返回到根据按钮 # 更改按钮颜色user clicked button 1/2/3的方法clickedAnswer，然后将更新的配色方案发送回 const 并重新渲染输入部分以反映颜色更新。

标签： reactjsreact-tsx

Answer 1

当您调用 时clickedAnswer={this.clickedAnswer}，该this方法中的引用为 null。将其替换clickedAnswer={this.clickedAnswer.bind(this)}为绑定到当前对象，以便它可以访问状态。

您可以在此处阅读有关该bind方法的信息：Function.prototype.bind()