带有 React 钩子的简单表单答案

【问题标题】：Simple form with React hooks带有 React 钩子的简单表单
【发布时间】：2020-11-06 07:32:12
【问题描述】：

这很简单，我正在尝试将表单的输入添加到状态，但它不起作用。有人能指出我做错了什么吗？

沙盒：https://codesandbox.io/s/unruffled-pine-64pxe?file=/src/App.js

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

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


function Field(){
  const [toDoItem, setToDoItem] = useState("");
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;

【问题讨论】：

什么是不起作用？
一切正常。那么，什么不适合你？
我希望能够在输入表单中输入“test”。然后，当我单击“添加”时，我希望看到它已添加到 State。我有一个控制台日志来显示状态。单击“添加”后，我希望 console.log 显示“测试”

标签： reactjs react-hooks

【解决方案1】：

  handleSubmit(event) {
    console.log('Form submitted: ' + toDoItem);
  }

模板：-

      <form onSubmit={this.handleSubmit}>
            <input type="text" value={toDoItem} onChange={addToDoItem}/>
            <input type="submit" value="Add" />
    </form>

【讨论】：