React受控输入框无法输入且控制台无输出问题求助

你的input是受控组件，但用了普通常量searchText绑定value，而非React状态变量。这会导致输入框被固定为"KFC"，无法响应输入，onChange事件也无法正常触发，所以控制台看不到打印内容。

引入useState管理输入状态，让输入框正常响应输入并打印内容：

import { useState } from "react";
import { restaurantList } from "../config";
import { RestrauntCard } from "./Restraunt";

const Body = () => {
  const [searchText, setSearchText] = useState("KFC");

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="Search"
          value={searchText}
          onChange={(e) => {
            const inputVal = e.target.value;
            console.log(inputVal);
            setSearchText(inputVal);
          }}
        />
        <button className="search-btn"> Search</button>
      </div>
      <div className="restaurant-list">
        {restaurantList.map((restaurant) => (
          <RestrauntCard {...restaurant.data} key={restaurant.data.id} />
        ))}
      </div>
    </>
  );
};

export default Body;

• React受控组件的value必须绑定到可更新的状态变量，当用户输入时，通过setSearchText更新状态，组件会重新渲染，输入框内容才会跟着变化。
• 普通常量是静态值，组件渲染后不会随用户操作改变，直接导致输入框失效，事件也无法正常触发。

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