Как передать значение активной радиокнопки в массив для вывода на экран?

Question

[kopFFFF]

Привет всем! Я новичок в React и работаю над созданием простенького Quiz-виджета, но столкнулся с проблемой: нужно добавлять в массив ответов результат, который хранится в выбранной радиокнопке. Пишу на ReactJS. Заранее благодарен за помощь. Пример кода:

class Results extends React.Component {            
  constructor(props) {                          
    super(props);
    this.state = {
      isStarting: false
    }
  }
 
  
  checkRes = () => {
    this.setState({
      isStarting: true
    })
  }
  render = () => {
    const { isStarting } = this.state;
    });
    
    if (!isStarting) {                          
      return (
        <div>
          <h1>Результаты голосования:</h1>
          <p>.........</p>                                 // Answers massive
          <button type="submit" onClick={this.checkRes}>Начать заново</button>
        </div>
      );
    }
    return <Question1 />                  
  }
}
 
 
 
 
class Question1 extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      isStarting: false,
      option: 'Выберите ответ'                                   // Next time change this parameter
    }
  }
  
  ansQ1 = () => {                               
    this.setState({
      isStarting: true
    })
  }
 
 
  handleRadioChange(event) {
        this.setState({option: event.target.value});
    }
 
 
  render = () => {
 
    const { isStarting } = this.state;
    if (!isStarting) {
      return (
        <div>           
          <p>Какое мороженое вы предпочитаете?</p>
          <p>Ваш выбор: {this.state.option}</p>
 
            <input
                    name="var1"
                      type="radio"
                    value="Пломбир"
                    checked={this.state.option == 'Пломбир'}
                    onChange={this.handleRadioChange.bind(this)}
                /><span>Пломбир</span><br />
 
                  <input
                    name="var2"
                    type="radio"
                    value="Шоколадное"
                    checked={this.state.option == 'Шоколадное'}
              onChange={this.handleRadioChange.bind(this)}
                  /><span>Шоколадное</span><br />
 
            <input
                    name="var3"
                    type="radio"
                    value="Фисташковое"
                    checked={this.state.option == 'Фисташковое'}
              onChange={this.handleRadioChange.bind(this)}
                  /><span>Фисташковое</span><br />
 
            <button type="submit" onClick={this.ansQ1}>Далее</button>
              </div>
      );
    }
    return <Results />
  }
 
class App extends React.Component {
  render () {
    return (
      <Question1 />
    );
  }
}
export default App;

Comments

[Дмитрий]

Радиокнопка означает выбор одного варианта, вопрос у вас один, выводится один раз, откуда взяться массиву? У вас тогда должно быть несколько Question1 на странице, тогда ответы можно будет подсчитать и вывести. Пока логически непонятно что вы хотите сделать.

[kopFFFF]

В коде вопросов 5. Я привёл только один для примера. Даже здесь нужно хотя бы одно значение (один выбранный ответ = активная радиокнопка) занести в массив, чтобы на выходе получить ответ в виде строки.

[Петр Мухуров]

Нужно вывозить state наверх, вкидывать внутрь Question1 onChange и вызывать его при изменении вэлью в радиокнопке, а вверху пушить в стейт результат

[kopFFFF]

Петр Мухуров, Можете, пожалуйста, продублировать Ваше сообщение в виде программного кода?

[Петр Мухуров]

kopFFFF,

class App extends React.Component {
  state = {
    results: []
  };

  handleChange = v => this.setState({
    ...this.state.results,
   v
  })
  render () {
    return (
      <Question1 onChange={this.handleChange} />
    );
  }
}

class Question1 extends React.Component {
ansQ1 = () => {      
    this.props.onChange({ id: "q1", value: this.state.option });
  }
}

[kopFFFF]

Петр Мухуров, код из класса App импортировать в класс Results или так же оставить в App? Затем ansQ1 же еще должен содержать:

ansQ1 = () => {                               
    this.setState({
      isStarting: true
    })
  }

И массив должен выводиться в классе Results на странице.

Answer 1

[VeniVidiVici7]

https://stackblitz.com/edit/react-ts-vzyvyh?file=i...