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

【问题标题】：handleSubmit functional is not working in functional component of ReacthandleSubmit 功能在 React 的功能组件中不起作用
【发布时间】：2020-07-12 03:43:46
【问题描述】：

我正在尝试将待办事项应用程序的类组件转换为功能组件。一切顺利，但是当我提交表单时，出现了空白屏幕。我认为 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>
  )
}

【问题讨论】：

标签： reactjs react-functional-component

【解决方案1】：

您的问题在于以下行：

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

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

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

【讨论】：

很高兴知道我能帮上忙！ :)