вернуть ребенка на огненную базу reactjs - PullRequest
0 голосов
/ 25 января 2020

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

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;

Это мой текущий код. Я знаю, что есть функция для подсчета количества дочерних значений в базе данных, например, Firebase getChildrenCount () всегда возвращает «1» , но я не знаю, как начать и где поместить его в мою реагирующую сеть приложение. Кроме того, я очень плохо знаком с разработчиком веб-приложений, использующим React, поэтому извините, если мой вопрос кажется неуместным

Любая помощь будет принята с благодарностью!

ОБНОВЛЕНО: Я изменил базу данных пожарных на FireStore, так как нашел много ссылок, которые используют firestore для создания counter et c. но я до сих пор не знаю, что делать с моей реакцией, потому что большинство, если не все ссылки, относятся к java.

...