reactjs - 如何使用 React 钩子中的表单进行 console.log 状态？

Question

当我在表单中提交文本时，我希望能够通过 console.log 看到该文本的状态。我添加了一个console.log在添加状态后直接触发，但我在控制台中看不到任何内容，我做错了什么？

我想看到什么：我提交“test1”然后我提交“test2”，然后我想在我的控制台中看到“test1，test2”的状态。

import React, { useState } from 'react';
import './App.css';

function App() {
    return (
      <div>
        <Field />
      </div>
    );
  }


function Field(){
  const [toDoItem, setToDoItem] = useState('');


  const addToDoItem = (event) => {
    setToDoItem(event.target.value), function(){
      console.log(toDoItem)
    }
  }

  return (
        <form>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
        </form>
  );
}

export default App;

标签： reactjsreact-hooks

Answer 1

import React, { useState } from 'react';
import './App.css';

function App() {
    return (
      <div>
        <Field />
      </div>
    );
  }


function Field(){
  const [toDoItem, setToDoItem] = useStateWithCallback('', toDoItem => {
    console.log(toDoItem);
  });


  const addToDoItem = (event) => {
    setToDoItem(event.target.value);
  }

  return (
        <form>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
        </form>
  );
}

export default App;