尝试在我的基本待办事项列表应用中设置表单验证

Question

我正在尝试在我的待办事项列表应用中设置验证；但是，这似乎不起作用。即使表单为空，该过程仍会进行，我不知道问题出在哪里。我只是在线上学习教程，因为我对此很陌生，自己也不知道该怎么做。

import React from "react";

import * as TodoActions from "../actions/TodoActions";
import TodoStore from "../stores/TodoStore";
import Todo from './Todo.js'
import './Todos.css'

const formValid = ({ formErrors, ...rest }) => {
  let valid = true;

  Object.values(formErrors).forEach(val => {
    val.length > 0 && (valid = false);
  });

  Object.values(rest).forEach(val => {
    val === null && (valid = false);
  });

  return valid;
};

export default class Todos extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: TodoStore.getAll(),
      loading: true,
      formErrors: {
        todo: ""
      }
    };
    TodoActions.receiveTodos()
  }

  componentWillMount() {
    TodoStore.addChangeListener(this.getTodos);
  }

  componentWillUnmount() {
    TodoStore.removeChangeListener(this.getTodos);
  }

  componentDidUpdate() {
    TodoActions.receiveTodos();
  }

  getTodos = () => {
    this.setState({
      todos: TodoStore.getAll(),
      loading: false
    });
  }

  deleteTodo = (id) => {
    TodoActions.deleteTodo(id);
    }

  addItem = (e) => {
    e.preventDefault();
    TodoActions.createTodo(this._inputElement.value)
  }

  handleChange = e => {
    e.preventDefault();
    const { name, value } = e.target;
    let formErrors = { ...this.state.formErrors };

    switch (name) {
    case "todo":
      formErrors.todo =
        value.length < 0 ? "Task cannot be empty" : "";
      break;
    default:
      break;
    }
    this.setState({ formErrors, [name]: value }, () => console.log(this.state));
  }

  render() {
    const { todos } = this.state;
    const { formErrors } = this.state;
    let TodoComponents;


    if (this.state.loading) {
      TodoComponents = <h1>Loading...</h1>;
    } else if(todos.length) {
      TodoComponents = todos.map((todo) => {
          return (
            <div key={todo.id} className="todo-list">
              <Todo key={todo.id} name={todo.name}/>
              <div className="todo-btn"><a type="button" onClick={() => this.deleteTodo(todo.id)} className="delete-btn"><i class="fas fa-trash-alt"></i></a></div>
            </div>
          )
      });
    } else {
      TodoComponents = <p>No tasks to show :)</p>
  }

    return (
      <div className="main-container">
        <div className="small-container">
        <h1 className="title">All Tasks</h1>
        <ul>{TodoComponents}</ul>
        <form onSubmit={this.addItem}>
          <input ref={(a) => this._inputElement = a} placeholder="Enter Task" className="input-form {formErrors.todo.length < 0 ? 'error' : null}"/>
          {formErrors.todo.length < 0 && (
          <span className="errorMessage">{formErrors.firstName}</span>
          )}
          <button type="submit" className="input-btn">Add</button>
        </form>
        </div>
      </div>
    );
  }
}