Question

我知道也有类似的问题，但没有一个对我有帮助。这可能是愚蠢的，但我找不到它。

我正在阅读上面的教程，上面的代码也不允许我写输入内容。当我删除散布运算符，但是只有最后一个输入保存到状态时，它才起作用

function FormContato() {

    const [valores, setaValores] = useState({
        name: '',
        email: '',
        mensagem: ''
    })

    const atualizaCampo = e => {
        setaValores({
            ...valores,
            [e.target.name]: e.target.value
        })
    }

    const enviar = e => {
        e.preventDefault()
        console.log('valores\n')
        console.log(valores)
    }

    return (
        <div className="form-externo p-3 d-flex flex-column">
            <h3>Contato</h3>
            <div id="form-interno">
                <form onSubmit={e => enviar(e)}>
                    <div className="form-group">
                        <label for="name">Nome: *</label>
                        <input
                            value={valores.name}
                            onChange={(e) => atualizaCampo(e)}
                            type="text"
                            className="form-control"
                            id="name"
                            required
                        />
                    </div>
                    <div className="form-group">
                        <label for="email">Email: *</label>
                        <input
                            value={valores.email}
                            onChange={e => atualizaCampo(e)}
                            type="email"
                            className="form-control"
                            id="email"
                            required />
                    </div>
                    <div className="form-group">
                        <label for="message">Mensagem</label>
                        <textarea
                            value={valores.mensagem}
                            onChange={e => atualizaCampo(e)}
                            type="text"
                            className="form-control"
                            id="message"
                            rows="3">
                        </textarea>
                    </div>
                    <button className="btn btn-enviar">Enviar</button>
                </form>
            </div>
        </div>
    )
}

Answer 1

事件的目标是对调度事件的元素的引用。此处的输入没有“名称”属性。

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

React.js-无法在文本字段中输入

1 个答案: