如何在 React.js 中创建动态（条件）占位符

Question

所以我有一个提交表单，用户需要在其中输入任务名称来创建任务。我希望它在开始时为空，并在用户单击添加而不输入任何内容时有一个“您必须输入任务”的占位符。现在我可以实现它来显示占位符，但它要么一直存在，要么遇到无法访问的代码。我知道如何清除提交 & return 到添加功能，只需要能够有条件地显示占位符。这是我的代码在 atm 中的样子：

import { useState } from "react";

export default function Todos() {
  const [todos, setTodos] = useState([{ text: "hey" }]);
  const [todoText, setTodoText] = useState("");
  const [isEmpty, setEmpty] = useState("false");

  const addTodo = (e) => {
    e.preventDefault();
    if (todoText){
    setTodos([...todos, { text: todoText }]);
    setTodoText("");
    
  } else {
      setEmpty(true)
      setTodoText("");
      return
  }
  
} 

  

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>
          <input type="checkbox" />
          <label>{todo.text}</label>
        </div>
      ))}
      <br />
      <form onSubmit={addTodo}>
        <input
          
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          type="text"
        ></input>
        <button type="submit">Add</button>
        {isEmpty &&<span style={{ color: "red" }}>Enter a task</span>}
      </form>
    </div>
  );
}

Answer 1

我可以通过以下方式更改您的代码：

您需要通过 false 而非字符串 "false" 来初始化 isEmpty。

并且您可以在显示占位符文本时使用此标志。

请注意，我将 isEmpty 重命名为 showError。

import { useState } from "react";

export default function Todos() {
  const [todos, setTodos] = useState([{text: "hey"}]);
  const [todoText, setTodoText] = useState("");
  const [showError, setShowError] = useState(false);

  // @ts-ignore
  const addTodo = (e) => {
    e.preventDefault();

    if (todoText) {
      setTodos([...todos, {text: todoText}]);
      setTodoText("");
      setShowError(false);
    } else {
      setTodoText("");
      setShowError(true);
      return
    }
  }

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>
          <input type="checkbox"/>
          <label>{todo.text}</label>
        </div>
      ))}
      <br/>
      <form onSubmit={addTodo}>
        <input
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          type="text"
        ></input>
        <button type="submit">Add</button>
        {(showError && !todoText) && <span style={{color: "red"}}>Enter a task</span>}
      </form>
    </div>
  );
}

如何在 React.js 中创建动态（条件）占位符

How to create dynamic (conditional) placeholder in React.js

javascript

submission

placeholder

conditional-statements

reactjs