Question

所以我有一个基本的待办事项react应用，如何检查用户是否输入空值
我还如何确保将空的待办事项剂量添加到待办事项列表中？

Answer 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

Answer 2

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

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

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

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

2 个答案: