K
K
kopFFFF2019-12-10 11:44:14
Arrays
kopFFFF, 2019-12-10 11:44:14

How to pass the value of the active radio button to an array for display?

Hi all! I'm new to React and I'm working on creating a simple Quiz widget, but I've run into a problem: I need to add the result stored in the selected radio button to the answer array. I am writing in ReactJS. Thanks in advance for your help. Code example:

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;

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
VeniVidiVici7, 2019-12-12
@VeniVidiVici7

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question