在函数中使用 Input 的值

Question

我有点羞于写这个话题，因为即使我有一个 HTML 格式（4 年前）我也无法解决我的问题：

我不能在函数中使用输入类型文本的值，这是我的代码：

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> 类型。 我的目标是将“名称”和“内容”值存储在 Firebase 数据库中。

谢谢

Answer 1

两件事：

getElementsByName 是复数——注意“元素”中的“s”。所以它不仅返回一个元素，它还返回一个列表，即使只有一个。

由于您使用的是 React，因此您根本不需要以这种方式提取输入的值。相反，在输入本身上，只需添加一个 value 和 onChange 属性，然后跟踪输入的值作为状态。

您已经在您所在的州为他们准备了一个位置，所以请继续使用它。您将在他们键入时实时跟踪它，而不仅仅是在表单提交时。

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