ReactJs 按钮 onClick 未触发且输入字段不显示任何内容答案

【问题标题】：ReactJs button onClick not firing and input field does not show anythingReactJs 按钮 onClick 未触发且输入字段不显示任何内容
【发布时间】：2021-10-09 04:50:40
【问题描述】：

我正在尝试应用以下表单在 React 中提交，但我键入的输入文本字段中没有显示任何内容。因此 onClick 也不会被触发。

我看了很多帖子，但我找不到解决问题的方法，我也是初学者。

    <form>
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="Type a message"
          />
          <button onClick={sendMessage} type="submit">
            Send
          </button>
          {/* onClick={sendMessage} */}
        </form>

sendMessage 定义如下：

function Chat({ messages }) {
  const [input, setInput] = useState("");

  const sendMessage = async (e) => {
    e.preventDefault();
    await axios.post("/messages/new", {
      message: input,
      name: "Abhi",
      received: true,
      timestamp: "Just Now",
    });

    setInput("");
  };
// below contains the render return () which consists the form shown above.

【问题讨论】：

删除type="submit"，因为您已经拥有按钮的点击处理程序
或者将sendMessage移动到表单元素的onSubmit处理程序，即<form onSubmit={sendMessage}> ....。

标签： javascript html reactjs button react-hooks

【解决方案1】：

表单元素不需要form。只要包含您的表单元素，它就是perfectly valid HTML。这意味着您可以使用 div 并从处理程序中删除 e.preventDefault()。
然后，您可以从按钮中删除 type=submit 属性，因为它不再需要。只需使用 onClick 处理程序即可。
为了清楚起见，可能对输入使用单独的处理程序。
sendMessage 可能不需要是async，因为您不会从 Axios 进程中返回状态函数依赖其更新的任何内容，因此请将其设为标准函数。

const { useState } = React;

function Chat() {

  const [ input, setInput ] = useState('');

  function handleChange(e) {
    const { value } = e.target;
    console.log(value);
    setInput(value);
  }

  function sendMessage() {
    console.log(`Final state: ${input}`);
    // AXIOS here
    setInput('');
  }

  return (
    <div>
      <input
        value={input}
        onChange={handleChange}
        type="text"
        placeholder="Type a message"
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Chat />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：