将 innerHTML 数据和输入数据保存到 firebase

Question

我有这段代码，我想将数据保存到 Firebase。我希望能够将选定的会议与表单中的输入一起保存到 firebase。我是新来的反应并且现在坚持以进一步使用我的代码，所以一些我能做的建议将不胜感激。

This is how my app looks like and with error

我已经连接了 firebase，我可以推送数据，但无法将我的属性中的数据保存为 handleClick..

Error when I try to submit form

import './App.css';
import firebase from 'firebase';
const uuid = require('uuid');


class App extends Component {

        constructor(props) {
            super(props);
            // gör strängar av state
            this.state = {
                uid: uuid.v1(),
                meeting:'',
                name:'',
                email:'',
            };

            // binder propertys till click funktion 
            this.handleClick = this.handleClick.bind(this);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
            this.inputData = this.inputData.bind(this);

            // kopplar databas
            var config = {
                apiKey: "",
                authDomain: "",
                databaseURL: "",
                projectId: "",
                storageBucket: "",
                messagingSenderId: ""
            };
            firebase.initializeApp(config);
            // console.log(firebase);

            // skapar databasen lokalt med referens ref
            var database = firebase.database();
            var ref = database.ref('meeting');

            // variabel data med sträng id
            var data ={
                id: '',
            }
            // Pushar upp data till databas
            ref.push(data);
        }

        // hämtar klick för mötes knappar och skriver ut text i knappar
        handleClick = (e) =>{
            console.log(e.target.innerHTML);
            alert('Du har valt ett möte');
        }

        // hämtar API för olika möten 
        componentDidMount(){
            fetch('http://www.mocky.io/v2/5c9cdca03300004d003f2151')
            .then(res => res.json())
            .then(json => {
                let meetings = []
                json.forEach(meeting => {
                    if(new Date(meeting.startDate).getDay() !== new Date(meeting.endDate).getDay()){
                        let day1 = {
                            activity:meeting.activity,
                            location:meeting.location,
                            startDate:meeting.startDate,
                        }
                        let day2 = {
                            activity:meeting.activity,
                            location:meeting.location,
                            endDate:meeting.endDate,
                        }

                        meetings.push(day1,day2)

                    }else{
                        meetings.push(meeting)
                    }

                });
                console.log(meetings)
                this.setState({
                    isLoaded:true,
                    items: meetings,
                })
            });

            // import firebase och ref sträng
            firebase
            .database()
            .ref(`Newdata/${this.state.uid}`)
            .on('value', snap => console.log('from db', snap.val()));
        }


        // hämtar ny data 
    handleChange(e){
        this.setState({
            name: e.target.name});

    }

    // hämtar ref och skriver ut sträng med set till firebase
    handleSubmit(e){
        alert('Er bokning är bekräftad: ' + this.state.value);
        console.log('Du har bekräftat er bokning')
        e.preventDefault();
        firebase
        .database()
        .ref(`Newdata/${this.state.uid}`)
        .set({
            meeting: this.state.meeting,
            name: this.state.name,
            email: this.state.email,
        })
        .catch(error => console.log(error));
    }

// knyter input text till property
    inputData (_e){
        const meeting = this.refs.meeting1.value;
        const name = this.refs.name1.value;
        const email = this.refs.email1.value;
        this.setState({ meeting, name, email});
    }

  render() {

        var { isLoaded, items } = this.state;

        if (!isLoaded){
            return <div>Loading...</div>;
        }
        else {

    return (
            <>
      <div className="App">
                <div className="AppHeader">
                    <h1>Boka ditt möte nedan</h1>

                </div>
        <ul>

                    {items.map((item,i) => (
                        <li key={i}>

                    {/* kopplar handleClick till onChange*/}
                            <button onClick={(e) => this.handleClick(e)} onChange={this.inputData} ref="meeting1" className="select">
                            {item.activity}<br/>
                            Starttid: {item.startDate}<br/>
                            Sluttid: {item.endDate}<br/> 
                            Plats: {item.location}<br/>
                            </button>
                        </li>
                    ))}

                    </ul>

      </div>

        <div className="selectedMeeting">Fyll i dina uppgifter och bekräfta</div>

                <form onSubmit={this.handleSubmit} className="bookingSection">
                    <label>
                        Name:
                        <input type="text" value={this.state.name} onChange={this.inputData}
                        ref="name1"/>
                    </label>
                    <label>
                        E-mail:
                        <input type="text" value={this.state.email} onChange={this.inputData}
                        ref="email1"/>
                    </label>
                    <input className="confirm" type="submit" value="Bekräfta" />
                </form>
                <div className="viewSelect"></div>
                </>
    );
    }

}
}

export default App;

当我尝试将会议、姓名、电子邮件保存到 firebase 时出现错误。

Answer 1

默认情况下，只有经过身份验证的用户才能访问数据库。

'rules': {
  '.read': 'auth != null',
  '.write': 'auth != null'
}

你必须在Firebase console上定义规则

您可以允许每个正在开发的人读取或写入数据库，然后如果需要添加更多规则（我建议您熟悉 firebase 规则）：

'rules': {
  '.read': true,
  '.write': true
}

这应该可以解决您的问题。 另外，如果您是 React 新手，我建议您学习使用 Redux 并将其与 React Redux Firebase 结合使用，这些对您与 React 一起使用会有很大帮助。

Answer 2

您可以在Stackoverflow answer 中找到对此问题的完整解释。还解释了如何正确处理正确的登录。