如何提交表单并将数据添加到Firebase实时数据库？

Question

我一直在使用本机Firebase身份验证教程。现在，我希望能够提交表单并将“字段”添加到Firebase实时数据库中。不确定如何获取UID并将其存储在数据库中。我想以store-> uid-> store_id-> store_name

的格式存储

我已经完成了表格。我需要有关onSubmit的帮助，以获取UID并提交并存储在Firebase中。

import React, {Component } from 'react';
import { withFirebase } from '../Fireabse';
const INITIAL_STATE = {
store
};

class StoreForm extends Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };  
}

onSubmit = event => {
const { store };
}

onChange = event => {
this.setState({ [event.target.name]: event.target.value });
}

render() {
const { store } = this.state
const isInvalid =
store === ''

return (

<form onSubmit={this.onSubmit}>
    <input
    name="store"
    value={store}
    onChange={this.onChange}
    type="text"
    placeholder="Store"
    />

    <button disabled ={isInvalid} type="submit"> 
        Add Data 
    </button>
</form>
);
}
}

我有

firebase / context.js

import React from 'react';
const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
<FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase}/>}
</FirebaseContext.Consumer>
)
export default FirebaseContext;

fireabse / firebase.js

class Firebase {
constructor() {
    app.initializeApp(config);
    this.auth=app.auth();
    this.db = app.database();
}

doCreateUserWithEmailAndPassword = (email,password) =>
this.auth.createUserWithEmailAndPassword(email,password);

doSignInWithEmailAndPassword = (email,password) =>
this.auth.signInWithEmailAndPassword(email,password);

doSignOut = () => this.auth.signOut();

doPasswordReset = email => 
this.auth.sendPasswordResetEmail(email);

doPasswordUpdate = password =>
this.auth.currentUser.updatePassword(password);

user = uid => this.db.ref(`users/${uid}`);
users = () => this.db.ref('users');
}
export default Firebase;

session / context.js

import React from 'react';
const AuthUserContext = React.createContext(null);
export default AuthUserContext;

session/index.js
import React from 'react';
import AuthUserContext from './context';
import withAuthentication from './withAuthentication';
import withAuthorization from './withAuthorization';
const Session = () => (
<div>
    <h1>Session</h1>
</div>
);

export { AuthUserContext, withAuthentication, withAuthorization }
export default Session;

session / withAuthentication.js

import React from 'react';
import AuthUserContext from './context';
import { withFirebase } from '../Firebase';

const withAuthentication = Component => {
class WithAuthentication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            authUser: null,
        };
    }

    componentDidMount() {
        this.listener = 
this.props.firebase.auth.onAuthStateChanged(
            authUser => {
                authUser
                ? this.setState({ authUser })
                : this.setState({ authUser: null });
            },
        );
    }
    componentWillUnMount() {
        this.listener();
    }

    render() {
        return(
        <AuthUserContext.Provider value={this.state.authUser}>
            <Component {...this.props} />
        </AuthUserContext.Provider>
        );
    }
}
return withFirebase(WithAuthentication);
};
export default withAuthentication;

session / withAuthorization.sj

import React from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import AuthUserContext from './context';
import { withFirebase } from '../Firebase';
import * as ROUTES from '../../constants/routes';

const withAuthorization = condition => Component => {
class WithAuthorization extends React.Component {
    componentDidMount() {
        this.listenter = 
this.props.firebase.auth.onAuthStateChanged(
            authUser => {
                if(!condition(authUser)) {
                    this.props.history.push(ROUTES.SIGN_IN);
                }
            },
        );
    }
    componentWillUnMount() {
        this.listenter();
    }
    render() {
        return (
        <AuthUserContext.Consumer>
            {
                authUser =>
                condition(authUser)
                ? <Component {...this.props}/>
                : null
            }
        </AuthUserContext.Consumer>
        );
    }
}
return compose(
    withRouter,
    withFirebase,
)(WithAuthorization);
};

export default withAuthorization;