Радиокнопка не может вернуть другое состояние

Question

Я довольно новичок в разработке веб-приложений с использованием React. js и Firebase, так что извините, если мой вопрос не выглядит актуальным.

У меня есть это простое веб-приложение, в котором пользователь может выбрать один из вариантов. множественный выбор с помощью переключателя. Когда пользователь закончит отвечать на вопросы, он отправит свои ответы, и ответы будут отправлены в Firebase.

Теперь я застрял при записи выбранного значения в Firebase. Для меня есть 2 проблемы:

1) Радиокнопка может быть нажата только один раз. Это означает, что пользователи не могут ответить на второй вопрос без отмены выбора первого ответа.

2) Когда я нажимаю на кнопку отправить, все остальные опции возвращают те же значения, что и выбранная опция.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import firebase from './firebase.js';

class App extends Component {
  constructor(){
          super();
          this.state = {
              owl: '',
              house: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    render(){
        return(
            <div>
            <ol type="1">
            <form onSubmit={this.handleSubmit}>

            <li><p>What is the name of Harry Potter's owl?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="owl" value="hedwig" checked={this.state.owl === "hedwig"} onChange={this.handleChange}/>
                        Hedwig<br></br></li>
                        <li><input type="radio" name="owl" value="ron" checked={this.state.owl === "ron"} onChange={this.handleChange}/>
                        Ron <br></br></li>
                        <li><input type="radio" name="owl" value="brian" checked={this.state.owl === "brian"} onChange={this.handleChange}/>
                        Brian</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <li><p>What is the name of Cho Chang's house?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="house" value="gryffindor" checked={this.state.house === "gryffindor"} onChange={this.handleChange}/>
                        Gryffindor<br></br></li>
                        <li><input type="radio" name="house" value="slytherin" checked={this.state.house === "slytherin"} onChange={this.handleChange}/>
                        Slytherin <br></br></li>
                        <li><input type="radio" name="house" value="ravenclaw" checked={this.state.house === "ravenclaw"} onChange={this.handleChange}/>
                        Ravenclaw</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <button>Submit!</button>
            </form>
            </ol>
            </div>
        )
    }

    handleChange = (e) =>{
        this.setState({
            owl: e.target.value,
            house: e.target.value
        });
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        const itemsRef = firebase.database().ref('answers');
        const item = {
            owl: this.state.owl,
            house: this.state.house
        }
        itemsRef.push(item);
        this.setState({
            owl: '',
            house: ''
        });
    }
}

export default App;

Answer 1

Я нашел ответ уже после 12 часов поиска и просмотра кода.

Мне просто нужно было задать уникальное имя для метода onChange. Вот что я сделал.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import firebase from './firebase.js';

class App extends Component {
  constructor(){
          super();
          this.state = {
              owl: '',
              house: ''
        };

        //owlChange and houseChange are now exclusively for owl and house values respectively
        this.owlChange = this.owlChange.bind(this);
        this.houseChange = this.houseChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    render(){
        return(
            <div>
            <ol type="1">
            <form onSubmit={this.handleSubmit}>

            <li><p>What is the name of Harry Potter's owl?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="owl" value="hedwig" checked={this.state.owl === "hedwig"} onChange={this.owlChange}/>
                        Hedwig<br></br></li>
                        <li><input type="radio" name="owl" value="ron" checked={this.state.owl === "ron"} onChange={this.owlChange}/>
                        Ron <br></br></li>
                        <li><input type="radio" name="owl" value="brian" checked={this.state.owl === "brian"} onChange={this.owlChange}/>
                        Brian</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <li><p>What is the name of Cho Chang's house?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="house" value="gryffindor" checked={this.state.house === "gryffindor"} onChange={this.houseChange}/>
                        Gryffindor<br></br></li>
                        <li><input type="radio" name="house" value="slytherin" checked={this.state.house === "slytherin"} onChange={this.houseChange}/>
                        Slytherin <br></br></li>
                        <li><input type="radio" name="house" value="ravenclaw" checked={this.state.house === "ravenclaw"} onChange={this.houseChange}/>
                        Ravenclaw</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <button>Submit!</button>
            </form>
            </ol>
            </div>
        )
    }

    owlChange = (e) =>{
        this.setState({
            owl: e.target.value
        });
    }

    houseChange = (e) =>{
        this.setState({
            house: e.target.value
        });
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        const itemsRef = firebase.database().ref('answers');
        const item = {
            owl: this.state.owl,
            house: this.state.house
        }
        itemsRef.push(item);
        this.setState({
            owl: '',
            house: ''
        });
    }
}

export default App;