Блог

Я создаю веб-приложение для бронирования встреч. Я хочу сохранить содержимое кнопок в firebase, а также входной текст в форме в firebase.

Я не могу ввести текст в поле ввода, потому что тогда я получаю ошибку: TypeError: не удается прочитать свойство ‘ссылки’ неопределенного введите описание изображения здесь
введите описание изображения здесь

 import React, { Component } from "react";
import "./App.css";
import firebase from "firebase";
const uuid = require("uuid");

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: uuid.v1(),
      meeting: "",
      name: "",
      email: ""
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

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

    var database = firebase.database();
    var ref = database.ref("meeting");

    var data = {
      id: "",
      user: ""
    };
    ref.push(data);

    // this.state = {
    //  items: [],
    //  isLoaded: true,
    // }

    // this.state = {
    // name: '',
    // email: '',
    // };
  }

  handleClick = e => {
    console.log(e.target.innerHTML);
    alert("Du har valt ett möte");
  };

  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
        });
      });

    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .on("value", snap => console.log("from db", snap.val()));
  }

  handleChange(e) {
    this.setState({
      name: e.target.name
    });
  }

  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));
  }

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

export default App;
  

Убедитесь, что ваша переменная «def» определена, прежде чем пытаться ее нажать, например:

 var data = { id: "",user: "" };
var ref = [];
ref.push(...);
  

Либо добавьте в свой конструктор:

 this.inputData = this.inputData.bind(this);
  

или используйте синтаксис стрелки, чтобы сохранить лексический this:

 inputData = (e) => {