如何在表单 OnPost 方法 React 中传递值

Question

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




<div id="message-container"></div>
                <form onSubmit = {afterSubmission}>
                    <label for="message-input">Message</label>
                    <input type="text" id="message-input" />
                    <button type="submit" id="send-button">Send</button>
                </form>

我有这两段代码，我的问题是如何将表单中输入标签的值传递给 afterSubmission 方法？

Answer 1

假设这是同一个组件，一个简单的解决方案是使用state 。

您的代码片段不是很有用，只是作为未来问题的 FYI，但这是我跟踪表格 state 的示例。

import { useState } from "react";

export default function App() {
  const [message, setMessage] = useState("test");

  const handleChange = (e) => {
    setMessage((old) => e.target.value);
  };

  const afterSubmission = (e) => {
    e.preventDefault();
    console.log(message);
  };

  return (
    <div className="App">
      <form onSubmit={afterSubmission}>
        <input
          type="text"
          id="message-input"
          value={message}
          onChange={handleChange}
        />
        <button 
          type="submit" 
          id="send-button"
        >
          Send
        </button>
      </form>
    </div>
  );
}

如您所见，这会在组件的 state 中跟踪您的消息，这使得它可以在afterSubmission function 中访问。