检查表单验证中的输入是否为空，为什么总是为false？

Question

我试图在添加待办事项的待办事项列表上运行功能。函数将选中输入框，以检查输入框是否为空以及是否为空。

但是，在使用函数检查输入是否为空之后，即使输入为空，它也始终返回False。错误在哪里？

有问题的函数名称为“ checkInput（）”，它从页面上的主提交按钮运行。

import React from "react";
import "./App.css";
import { isTemplateElement } from "@babel/types";

class TodoListt extends React.Component {
  state = {};

  constructor(props) {
    super(props);

    this.state = {
      userInput: "",
      list: [],
    };
  }

  changeUserInput(input) {
    this.setState({
      userInput: input
    })
  }


  addToList() {
    const { list, userInput } = this.state;
    this.setState({
      list: [...list, {
        text: userInput, key: Date.now(), done: false
      }],
      userInput: ''
    })
  }

  handleChecked(e, index) {
    console.log(e.target.checked);
    const list = [...this.state.list];
    list[index] = { ...list[index] };
    list[index].done = e.target.checked;
    this.setState({
      list
    })
  }

  checkInput() {
    console.log(this.state.userInput);
    userInput: '' ? console.log("True") : console.log("False")
  }


  render() {


    return (
      <div className="to-do-list-main">
        <input
          onChange={(e) => this.changeUserInput(e.target.value)}
          value={this.state.userInput}
          type="text"
        />
        <button onClick={() => { this.checkInput(); { this.addToList(this.state.userInput) } }}>Add todo</button>

        {this.state.list.map((list, index) => (
          <div className="form">
            <ul>

              <li><input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
                <span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
                  {list.text}
                </span>
              </li>
            </ul>
          </div>
        ))}


      </div>
    );
  }
}

export default TodoListt;