React.js中不使用onSubmit清空输入框：解决value属性需搭配onChange的报错问题

首先来说说你遇到的报错原因：在React中，当你给input设置value属性时，它就变成了受控组件，这意味着React需要通过onChange事件来同步输入框的值和你的state。你现在只加了value却没有对应的onChange回调，所以React会抛出value can be used only with onChange的错误。

再看你的代码逻辑，还有个小问题：你在onKeyPress的回调里每次按键都会执行setInput("")，这会导致输入框刚输入字符就被清空，根本没法正常输入内容。而且因为setState是异步的，当你按下Enter时，input的值可能还没更新到最新的输入内容，提交的数据会不准确。

下面是修正后的完整代码，我会标注关键改动：

import { useState } from "react";
import List from "./List";
import "./Form.css";
import iconSun from "../images/icon-sun.svg";

const Form = (props) => {
  const [input, setInput] = useState("");

  // 专门处理输入内容的变化，同步到state
  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  // 专门处理Enter按键提交逻辑
  const handleKeyPress = (event) => {
    if (event.key === "Enter" && input.trim()) { // 加个trim防止提交空内容
      const data = {
        name: input,
        id: Math.floor(Math.random() * 10000).toString() // 简化随机ID生成逻辑
      };
      props.eventHandler(data);
      setInput(""); // 提交成功后重置输入框
    }
  };

  return (
    <div className="toform">
      <div className="heading">
        <h1>Todo</h1>
        <img src={iconSun} alt="Sun icon" className="imgs" />
        {/* 这里同时设置onChange和onKeyPress，满足受控组件要求 */}
        <input 
          type="text" 
          onChange={handleInputChange} 
          onKeyPress={handleKeyPress} 
          value={input} 
          placeholder="Add a new todo..." // 可以加个占位提示更友好
        />
      </div>
      <List lists={props.name} />
    </div>
  );
};

export default Form;

关键改动说明： #

• 拆分了事件处理函数：handleInputChange负责同步输入框内容到state，handleKeyPress只处理Enter提交的逻辑，职责更清晰。
• 给input添加了onChange属性，解决了报错问题，同时让输入框成为标准的受控组件。
• 只有在按下Enter且输入内容不为空时才提交数据，提交后再执行setInput("")来重置输入框，这是受控组件重置的标准方式。
• 简化了随机ID的生成逻辑（原来的Math.random().toFixed(4)*10000其实和Math.random()*10000效果一样，因为toFixed(4)会转成字符串再乘，不如直接用floor处理）。

这样修改后，不仅解决了报错问题，输入框的功能也能正常工作，提交后会自动清空输入框。

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