为什么这个 React 子组件属性值是 Undefined？

Question

我正在学习 ReactJS，我正在尝试使用 React 组件创建一个简单的测验。我有三个组成部分：

FinalDiv -- 父组件

问题：显示问题
答案：显示该问题的选项

两者都是 FinalDiv

的子组件

为了计算正确答案和错误答案并转到下一个问题，我正在使用方法 处理器。

我的问题是我无法从 Answer 组件中获取所选选项的值。选项的值存储在 Answer 的 capvalue 属性中。

到目前为止，我已尝试 event.target.value 在 processor 方法中访问该值。但是在控制台中打印时它给出了 undefined。

我也试过this.capvalue。但结果相同。

请注意，它在渲染之前打印时给出了正确的值，但是在 processor 方法中打印时它给出了 Undefined 值，因为其中我无法检查所选答案是否正确。查看代码中的 2 条评论：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

const questionBoxStyle = {
backgroundColor : 'cyan',
textAlign : 'center',
width : '30%',
height : '50px',
marginLeft : '35%',
marginTop : '50px',
marginBottom : '50px'
}

const btnBoxStyle = {
backgroundColor : 'orange',
textAlign : 'center',
width : '30%',
height : '50px',
marginLeft : '35%',
}

class Question extends Component {
render() {
    return(
        <div style={this.props.style}>
            What is the capital of {this.props.country} ?
        </div>
    )
}
}

class Answer extends Component {
render() {
    return(
        <button onClick={this.props.doOnClick} style={this.props.style}>
            <h3>{this.props.capvalue}</h3>
        </button>
    )
}
}

class FinalDiv extends Component {

constructor(props) {
    super(props);
        this.state = {
            oq : [
                {
                    q : 'India',
                    op : ['Delhi','Mumbai','Kolkata','Chennai'],
                    correct : 'Delhi'
                },
                {
                    q : 'USA',
                    op : ['DC','New York','Chicago','LA'],
                    correct : 'DC'
                },
                {
                    q : 'UK',
                    op : ['Plymouth','London','Manchester','Derby'],
                    correct : 'London'
                },
                {
                    q : 'Germany',
                    op : ['Dortmund','Frankfurt','Berlin','Munich'],
                    correct : 'Berlin'
                }
            ],
            correct : 0,
            incorrect : 0,
            currIndex : 0
        }
        this.processor = this.processor.bind(this);

}

processor(event) {
// prints undefined in below line
    console.log('selected: '+event.target.capvalue+' -- actual answer: '+this.state.oq[this.state.currIndex].correct)
    if(this.capvalue === this.state.oq[this.state.currIndex].correct) {
        this.setState({
            correct : this.state.correct+1,
        })
    } else {
        this.setState({
            incorrect : this.state.incorrect+1,
        })
    }
    if(this.state.currIndex === 3) {
        this.setState({
            currIndex : 0
        })
    } else {
        this.setState({
            currIndex : this.state.currIndex+1 
        })
    }
}

render() {
    return(
        <div>
            <Question style={questionBoxStyle} country= 
 {this.state.oq[this.state.currIndex].q}/>
            {
                this.state.oq[this.state.currIndex].op.map((value, index) 
=> {
// if i try to print the value here, it prints correctly
                console.log('current index: '+this.state.currIndex+
' -- correct: '+this.state.correct+' -- incorrect: '+this.state.incorrect)
                   return <Answer key={index} style={btnBoxStyle} 
capvalue={value} doOnClick={this.processor}/>
               })
            }
            <div style={questionBoxStyle}> <h2> Correct : 
{this.state.correct} </h2> </div>
            <div style={questionBoxStyle}> <h2> InCorrect : 
{this.state.incorrect} </h2> </div>
        </div>
    )
}
}

ReactDOM.render(<FinalDiv />, document.getElementById('root'));


serviceWorker.unregister();

我的猜测是 processor 方法无法访问父组件 (FinalDiv) 中的 Answer 组件的属性。所以需要在子组件本身（答案组件）中做一些事情，但我不知道是什么。我是否以某种方式将状态传递给子组件或其他东西？

如果您知道更多信息或问题格式有误，请告诉我。

最近解禁了，不能提问了

Answer 1

您需要从 Answer 组件传递正确答案，

<button onClick={e => this.props.doOnClick(this.props.capvalue)} style={this.props.style}>
   <h3>{this.props.capvalue}</h3>
</button>

你的processor函数应该是，

processor(capvalue) {
    console.log(
      'selected: ' +
        capvalue +
        ' -- actual answer: ' +
        this.state.oq[this.state.currIndex].correct,
    )
    if (capvalue === this.state.oq[this.state.currIndex].correct) {
      this.setState({
        correct: this.state.correct + 1,
      })
    } else {
      this.setState({
        incorrect: this.state.incorrect + 1,
      })
    }
    if (this.state.currIndex === 3) {
      this.setState({
        currIndex: 0,
      })
    } else {
      this.setState({
        currIndex: this.state.currIndex + 1,
      })
    }
  }

Demo

Answer 2

事件目标是 Answer 组件中的 H3 标签，它没有属性 capvalue ，因此，尝试读取

event.target.capvalue

returns 未定义。你只需要改变

event.target.capvalue

到

event.target.innerHTML

代码将按预期运行。但是，这不是实现此目的的最佳方法，因此您应该采用不同的方法 approach.One 将唯一的 ID 分配给答案并将正确答案的 ID 作为 prop 传递给 Answer。

为什么这个 React 子组件属性值是 Undefined？

Why is this react child component attribute value Undefined?

reactjs

react-component

react-state