javascript - 单选按钮无法返回不同状态

Question

我对使用 React.js 和 Firebase 开发 Web 应用还很陌生，所以如果我的问题看起来不相关，请原谅我。

我有这个简单的网络应用程序，用户可以使用单选按钮从多个选项中选择一个选项。当用户回答完问题后，他们将提交答案，答案将提交到 Firebase。

现在我只能将所选值写入 Firebase。我有两个问题:

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;