React中如何将表单输入框的值传递给onSubmit处理函数？

你可以通过以下几种方式把input的值传递给afterSubmission处理函数：

方式一：通过事件对象直接获取表单内的input值 #

修改处理函数，去掉多余的message参数，直接从触发事件的表单元素中提取input的值：

const afterSubmission = (e) => {
    e.preventDefault()
    // 从表单中获取input元素的值
    const message = e.target.querySelector('#message-input').value;
    console.log(message);
    if (message === "") return
    displayMessage(message)
    
    // 清空input内容
    e.target.querySelector('#message-input').value = ""
}

表单的onSubmit绑定保持不变，因为submit事件会自动把事件对象e传入处理函数，通过e.target可以访问到表单本身，进而获取内部的input元素。

方式二：提前获取input元素的引用 #

在外部先获取input元素的DOM引用，之后直接在处理函数中使用这个引用的value属性：

// 提前获取input元素
const messageInput = document.getElementById('message-input');

const afterSubmission = (e) => {
    e.preventDefault()
    const message = messageInput.value;
    console.log(message);
    if (message === "") return
    displayMessage(message)
    
    messageInput.value = ""
}

这种方式更简洁，适合需要多次复用该input元素的场景。

方式三：React环境下使用useRef钩子（如果是React项目） #

如果你的代码是在React组件中，推荐使用useRef钩子来获取input的DOM引用：

import { useRef } from 'react';

function MessageForm() {
    const messageInputRef = useRef(null);

    const afterSubmission = (e) => {
        e.preventDefault()
        const message = messageInputRef.current.value;
        console.log(message);
        if (message === "") return
        displayMessage(message)
        
        messageInputRef.current.value = ""
    }

    return (
        <>
            <div id="message-container"></div>
            <form onSubmit={afterSubmission}>
                <label htmlFor="message-input">Message</label>
                <input type="text" id="message-input" ref={messageInputRef} />
                <button type="submit" id="send-button">Send</button>
            </form>
        </>
    );
}

通过ref属性把input元素和messageInputRef绑定，之后就能通过messageInputRef.current访问到input元素的所有属性。

内容的提问来源于stack exchange，提问作者Venoz