javascript - 在函数中使用 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} />