Функционал handleSubmit не работает в функциональном компоненте React - PullRequest
Новая
       15

Функционал handleSubmit не работает в функциональном компоненте React

0 голосов
/ 12 июля 2020

Я пытаюсь преобразовать компонент класса приложения 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>
  )
}

1 Ответ

0 голосов
/ 12 июля 2020

Ваша проблема заключается в следующей строке: 

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

Здесь вы назначаете объект текстовой клавише, а не только значение переменной text.

И вот почему когда вы используете oop поверх них в своем компоненте TodoList , вы не можете отобразить ни один из них.

...