handleSubmit 功能在 React 的功能组件中不起作用

Question

我正在尝试将待办事项应用程序的 class 组件转换为功能组件。一切顺利，但是当我提交表单时，出现空白屏幕。我认为 handleSubmit 函数中存在一些问题。请帮忙。

import React, {useState} from "react";

export const TodoFunc = (props: Props) => {

  const [items, setItems] = useState([])
  const [text, setText] = useState('')

  const handleChange = (e) => {
    setText(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (text.length === 0) {
      return;
    }
    const newItems = {text: {text}, id: Date.now()}
    setItems(() => (items.concat(newItems)))
    setText('')
  }

  return (
    <div>
      <h3>TODO</h3>
      <TodoList items = {items} />
      <form onSubmit={handleSubmit}>
        <label htmlFor="new-todo">
          What do you want to do?
        </label>
        <input type="text"
               id='new-todo'
               onChange={handleChange}
               value={text}
        />
        <button>
          Add #{items.length + 1}
        </button>
      </form>
    </div>
  );
};

const TodoList = (props) => {
  return (
    <ul>
      {props.items.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  )
}

Answer 1

您的问题出在下面一行：

const newItems = {text: {text}, id: Date.now()}

在这里，您将一个对象分配给文本键，而不仅仅是变量文本的值。

这就是为什么当您在 TodoList 组件中循环遍历它们时，您无法显示它们中的任何一个。

handleSubmit 功能在 React 的功能组件中不起作用

handleSubmit functional is not working in functional component of React

reactjs

react-functional-component