React Todo应用问题：输入框内容无法在控制台输出

你的代码里，输入框的onChange事件仅执行了状态更新操作，没有添加任何向控制台输出内容的逻辑，所以输入内容时控制台不会有任何输出。

两种解决方式 #

方式一：在onChange回调中直接打印输入值 #

直接在处理输入变化的回调里，先获取输入值并打印，再更新状态：

import { useState } from "react";

const Todo = () => {
  const [Items, setItems] = useState("");

  return (
    <div>
      <div>
        <input
          type="text"
          value={Items}
          onChange={(e) => {
            // 获取输入值并打印到控制台
            const inputValue = e.target.value;
            console.log(inputValue);
            // 更新状态
            setItems(inputValue);
          }}
        />
      </div>

      <div>
        <p>Apple</p>
      </div>
    </div>
  );
};

function App() {
  return (
    <div>
      <h1>TODO</h1>

      <Todo />
    </div>
  );
}

export default App;

方式二：使用useEffect监听状态变化打印 #

如果需要监听Items状态的所有变化并打印，可以添加useEffect钩子：

import { useState, useEffect } from "react";

const Todo = () => {
  const [Items, setItems] = useState("");

  // 监听Items状态变化，更新时打印
  useEffect(() => {
    console.log(Items);
  }, [Items]);

  return (
    <div>
      <div>
        <input
          type="text"
          value={Items}
          onChange={(e) => setItems(e.target.value)}
        />
      </div>

      <div>
        <p>Apple</p>
      </div>
    </div>
  );
};

function App() {
  return (
    <div>
      <h1>TODO</h1>

      <Todo />
    </div>
  );
}

export default App;

两种方式都能实现输入内容时控制台输出的需求，方式一更直接针对输入事件，方式二则适合需要监听状态所有变更的场景。

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