在 React hooks 上需要很少的帮助

Question

我尝试使用 React 和 Redux Toolkit 制作待办事项列表。在用于在列表中添加项目的 handleSubmit 函数中，我的 setText 以某种方式未将值设置为空字符串。这是我在 Stackblitz 上的完整代码：https://stackblitz.com/edit/react-ts-bqmjz1?file=components%2FTodoForm.tsx

const TodoForm = (): JSX.Element => {
  //Input value
  const [text, setText] = useState('');

  const dispatch = useDispatch();

  //setText not working
  const handleSubmit = (e: any) => {
    e.preventDefault();
    if (text.trim().length === 0) {
      return;
    }
    dispatch(addItem({ title: text }));
    setText('');
  };

  return (
    <form className="container-fluid" onSubmit={handleSubmit}>
      <div className="input-group">
        <input
          className="form-control"
          placeholder="Enter the value..."
          onChange={(e: { target: HTMLInputElement }) =>
            setText(e.target.value)
          }
        />
        {/* Submit button */}
        <button type="submit" className="btn btn-primary">
          Add
        </button>
      </div>
    </form>
  );
};

Answer 1

你非常接近！您只是错过了输入的价值支柱：

value={text}

const TodoForm = (): JSX.Element => {
  //Input value
  const [text, setText] = useState('');

  const dispatch = useDispatch();

  //setText not working
  const handleSubmit = (e: any) => {
    e.preventDefault();
    if (text.trim().length === 0) {
      return;
    }
    dispatch(addItem({ title: text }));
    setText('');
  };

  return (
    <form className="container-fluid" onSubmit={handleSubmit}>
      <div className="input-group">
        <input
          className="form-control"
          placeholder="Enter the value..."
          value={text}
          onChange={(e: { target: HTMLInputElement }) =>
            setText(e.target.value)
          }
        />
        {/* Submit button */}
        <button type="submit" className="btn btn-primary">
          Add
        </button>
      </div>
    </form>
  );
};

Answer 2

如果我理解得很好，当您点击添加按钮时，输入不会变为空。为此，您只需在输入

中添加 value={text}

<input
    className="form-control"
    placeholder="Enter the value..."
    value={text}
    onChange={(e: { target: HTMLInputElement }) =>
    setText(e.target.value)
    }
/>

在 React hooks 上需要很少的帮助

Need little help on React hooks

reactjs

redux-toolkit