Javascript 单选按钮不能返回不同的状态_Javascript_Java_Reactjs_Firebase

Javascript 单选按钮不能返回不同的状态

javascript java reactjs firebase

Javascript 单选按钮不能返回不同的状态,javascript,java,reactjs,firebase,Javascript,Java,Reactjs,Firebase,我对使用React.js和Firebase开发web应用相当陌生，所以如果我的问题与此无关，请原谅我有一个简单的web应用程序，用户可以使用单选按钮从多个选项中选择一个选项。当用户回答完问题后，他们将提交答案，并将答案提交给Firebase 现在我被困在将所选值写入Firebase中。我有两个问题： 1）单选按钮只能单击一次。这意味着如果不取消选择第一个答案，用户就无法回答第二个问题 2）当我单击submit时，所有其他选项返回与所选选项相同的值 import React, {Compon

我对使用React.js和Firebase开发web应用相当陌生，所以如果我的问题与此无关，请原谅

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

现在我被困在将所选值写入Firebase中。我有两个问题：

1）单选按钮只能单击一次。这意味着如果不取消选择第一个答案，用户就无法回答第二个问题

2）当我单击submit时，所有其他选项返回与所选选项相同的值

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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/firebase.js”导入firebase；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
猫头鹰：''，
房子：''
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
render（）{
返回(
哈利波特的猫头鹰叫什么名字

海德薇



罗恩



布莱恩






赵昌的房子叫什么名字

格兰芬多



斯莱特林



拉文克劳






提交
)
}
handleChange=（e）=>{
这是我的国家({
猫头鹰：e.target.value，
豪斯：e.target.value
});
}
handleSubmit=（e）=>{
e、 预防默认值（）；
const itemsRef=firebase.database（）.ref（'answers'）；
常数项={
猫头鹰：这个.state.owl，
豪斯：这个州
}
项目推送（项目）；
这是我的国家({
猫头鹰：''，
房子：''
});
}
}
导出默认应用程序；

经过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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/firebase.js”导入firebase；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
猫头鹰：''，
房子：''
};
//owlChange和houseChange现在分别专门用于owl和house值
this.owlChange=this.owlChange.bind（this）；
this.houseChange=this.houseChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
render（）{
返回(
哈利波特的猫头鹰叫什么名字

海德薇



罗恩



布莱恩






赵昌的房子叫什么名字

格兰芬多



斯莱特林



拉文克劳






提交
)
}
变化=（e）=>{
这是我的国家({
猫头鹰：e.target.value
});
}
换房=（e）=>{
这是我的国家({
豪斯：e.target.value
});
}
handleSubmit=（e）=>{
e、 预防默认值（）；
const itemsRef=firebase.database（）.ref（'answers'）；
常数项={
猫头鹰：这个.state.owl，
豪斯：这个州
}
项目推送（项目）；
这是我的国家({
猫头鹰：''，
房子：''
});
}
}
导出默认应用程序；