在函数中使用输入的值

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，因此您根本不需要以这种方式拉取输入的值。相反，在输入本身上，只需添加一个valueandonChange属性，然后将在其中输入的值作为状态进行跟踪。

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

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} />