Использовать значение Входа в функции

Question

Мне немного стыдно писать эту топи c, потому что даже если я получу образование HTML (4 года go), я не смогу решить свою проблему:

Я могу Не используйте значение типа ввода текста в функции, это мой код:

import React from 'react'
//import db from '../../constants/FirebaseConfig'

class Account extends React.Component {

    state = {
        name: '',
        content: ''
    }

    _formSubmit(e) {
        e.preventDefault()
        var name = document.getElementsByName('name')
        console.log(name)
        
    }

    render(){
        return(
            <div className="container">
                <br></br>
                <h3 className="title">Account</h3>
                <form id="form">
                    <br></br>
                    <label>Titre</label>
                    <input type="text" name="name" placeholder="Ici le nom de l'Article"/>
                    <br></br><br></br>
                    <label>Contenue</label>
                    <input type="text" name="content" placeholder="Ici le contenue de l'article"/>
                    <br></br><br></br>
                    <input type="button" value="suivant" onClick={(e) =>this._formSubmit(e)}/>
                    <br></br>
                </form>
            </div>
        )
    }
}

export default Account

После нескольких попыток отладки, я думаю, проблема в объекте var name, который имеет тип NodeList<input>. Моя цель состоит в том, чтобы сохранить значения 'name' и 'content' в базе данных firebase.

Спасибо

Answer 1

Две вещи:

getElementsByName - множественное число - обратите внимание на «s» в «Элементах». Таким образом, он не просто возвращает один элемент, он возвращает список, даже если он только один.

Поскольку вы используете React, вам вообще не нужно извлекать значение ввода таким образом. Вместо этого на самом входе просто добавьте свойства value и onChange, а затем отследите вводимое там значение как состояние.

У вас уже есть место для них в вашем состоянии, поэтому просто go вперед и используйте это. Вы будете отслеживать его вживую по мере их ввода, а не только при отправке формы.

class Account extends React.Component {

    state = {
        name: '',
        content: ''
    }

    _formSubmit(e) {
        //just process your form _submission_ here           
    }

    onChangeName = (e) => {
        this.setState({
           name: e.target.value
        });
    }

    render(){
        return(
            <div className="container">
                <br></br>
                <h3 className="title">Account</h3>
                <form id="form">
                    <br></br>
                    <label>Titre</label>
                    <input type="text" name="name" placeholder="Ici le nom de l'Article" value={this.state.name} onChange={this.onChangeName} />

Answer 2

Не предлагая никакого обходного пути, но пытаясь заставить именно то, что вы опубликовали, работать так, как вы ожидаете, вот что я понял, что вы пытались сделать:

Ваша проблема:

_formSubmit(e) {
    e.preventDefault()
    var name = document.getElementsByName('name') //Get's a list of Elements with the given name
    console.log(name) // This prints the list contained in name variable

}

Решение:

_formSubmit(e) {
    e.preventDefault()

   // Assuming you're trying to print the values of all inputs
   // First - Get all elements whose values you want to log, as per your initial code
    var name = document.getElementsByName('name'); // returns ListNode<HTMLElement> 

   // Now loop through each input and print it's value to console
   name.forEach(
     function(input){
      console.log(input.value); //Print the value of each input listed
     }
   );    
}

Answer 3

В функции HandleChange он автоматически проверит имя, на котором вы изменили, и обновит значение

import React, { Component } from "react";

export default class App extends Component {
  state = {
    name: "",
    content: "",
    datas: []
  };
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const data = {
      name: this.state.name,
      content: this.state.name
    };
    this.setState({
      datas: [...this.state.datas, data],
      name: "",
      content: ""
    });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
            placeholder="Ici le nom de l'Article"
          />
          <input
            type="text"
            name="content"
            value={this.state.content}
            onChange={this.handleChange}
            placeholder="Ici le nom de l'Article"
          />
          <button>Submit</button>
        </form>
        <div>
          {this.state.datas.map(item => {
            return (
              <div key={Math.random()}>
                <h6>{Math.random()}</h6>
                <h4>Name:{item.name}</h4>
                <h4>Content:{item.content}</h4>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

Answer 4

Как это?:

 <form id="form">
                    <br></br>
                    <label>Titre</label>
                    <input type="text" name="name" placeholder="Ici le nom de l'Article" onChange={(name) => this.setState({name: name})}/>
                    <br></br><br></br>
                    <label>Contenue</label>
                    <input type="text" name="content" placeholder="Ici le contenue de l'article"  onChange={(content) => this.setState({content: content})}/>
                    <br></br><br></br>
                    <input type="button" value="suivant" onClick={() => console.log(this.state.content, this.state.name)}/>
                    <br></br>
                </form>