Question

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

1 个答案: