我如何检查用户输入是否为空（反应）答案

【问题标题】：How can i check if user input is empty (react)我如何检查用户输入是否为空（反应）
【发布时间】：2020-09-20 18:35:29
【问题描述】：

所以我有一个基本的 todo react 应用程序，我如何检查用户是否输入了空值
我怎样才能确保将空的待办事项添加到待办事项列表中

【问题讨论】：

请添加您的代码。那么我们可以帮助您...
欢迎来到 StackOverflow。请通过tour 环顾四周，通读HELP center，然后阅读How to 、What types of questions should I avoid asking? 并提供MCVE: Minimal, Complete, and Verifiable Example。如果周围的人可以轻松阅读并理解您的意思或问题所在，他们将更愿意提供帮助:)

【解决方案1】：

向我们提供您正在使用的示例代码，我们很容易提出建议。

假设您使用类组件。在addTask 方法中，您可以检查用户是否输入了文本。

export default class App extends React.Component {
  state = {
    list: [],
    task: ""
  };

  addTask = () => {
    const { task, list } = this.state;
    if (!task) {
      alert("Please enter a task");
      return false;
    }

    this.setState({ list: [...list, task] });
  };

  render() {
    const { task, list } = this.state;

    return (
      <>
        <input
          value={task}
          onChange={e => this.setState({ task: e.target.value })}
        />

        <button onClick={this.addTask}>Add task</button>

        <ul>
          {list.map(task => (
            <li>{task}</li>
          ))}
        </ul>
      </>
    );
  }
}

https://codesandbox.io/s/intelligent-yonath-clken?file=/src/App.js:51-736

【讨论】：

这是我目前所拥有的codesandbox.io/s/mystifying-dew-0gcmt?file=/src/App.js

【解决方案2】：

我认为您需要的类似于下面的代码，只需检查修剪的值是否不等于“”，然后将修剪的项目添加到您的列表中。

function addItem() {
if(inputText.trim()!==""){
  setItems(prevItems => {
    return [...prevItems, inputText.trim()];
  });
  setInputText("");
}
}

还要确保保存 index.js，以便在尝试访问本地端口上的应用程序之前重新启动服务器。

【讨论】：