Я изучаю ReactJS и пытаюсь создать простой тест с использованием компонентов реагирования. У меня есть три компонента:
FinalDiv - родительский компонент
- Вопрос : Отображает вопрос
- Ответ : отображение параметров для этого вопроса
Оба являются дочерними компонентами FinalDiv
Для расчета правильного и неправильного ответа и перехода к следующему вопросу я использую метод процессор .
Моя проблема в том, что я не могу получить значение выбранной опции из Ответ компонента. Значение опции сохраняется в capvalue атрибут Ответ .
До сих пор я пытался использовать event.target.value для доступа к этому значению в процессор метод. Но это дает неопределенный при печати в консоли.
Я также пытался this.capvalue . Но тот же результат.
Имейте в виду, что он дает правильное значение при печати непосредственно перед рендерингом, но при печати по методу процессор он дает 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();
Я предполагаю, что метод процессор не может получить доступ к атрибуту компонента Answer в родительском компоненте (FinalDiv). Так что что-то должно быть сделано в самом дочернем компоненте (компонент ответа), но я не знаю что. Должен ли я как-то передать состояние дочернему компоненту или что-то в этом роде?
Пожалуйста, дайте мне знать, если вам известна дополнительная информация или если форматирование вопроса неправильное.
Недавно меня освободили от вопросов.