React输入状态不清楚如何清除输入状态

Question

正如您所看到的，我使用react-redux执行todo。我的应用程序运行得很好，但问题是，当我点击添加按钮时，输入值没有被清除。我该如何解决这个问题？

import React, { useState } from "react";
import { AddTodo, DeleteTodo, RemoveTodo } from "./actions";
import { useDispatch } from "react-redux";

const Todo = () => {
const [inputData, setInputData] = useState();
const dispatch = useDispatch();
return (
<div className="container">
<div className="mt-3">
<div className="row">
<div className="col-5 col-md-8 col-sm-12 m-auto">
<div className="card shadow-lg">
<div className="card-header bg-warning">
<h2 className="text-center fw-bolder text-primary">
Todo List
</h2>
<div className="row my-2">
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="You can add todo Here...."
onChange={(e) => setInputData(e.target.value)}
/>
<button
className="btn btn-success"
onClick={() => dispatch(AddTodo(inputData), setInputData(""))}
>
<i className="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<div className="card-body">
<ul className="list-group text-center fw-bolder">
<li className="list-group-item">Girish</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

export default Todo;

我在应用程序中导入，应用程序是主要组件。我能做些什么来解决我的问题？

Answer 1

发生这种情况是因为您在dispatch:内部使用setInputData("")

import React, { useState } from "react";
import { AddTodo, DeleteTodo, RemoveTodo } from "./actions";
import { useDispatch } from "react-redux";

const Todo = () => {
const [inputData, setInputData] = useState();
const dispatch = useDispatch();
return (
<div className="container">
<div className="mt-3">
<div className="row">
<div className="col-5 col-md-8 col-sm-12 m-auto">
<div className="card shadow-lg">
<div className="card-header bg-warning">
<h2 className="text-center fw-bolder text-primary">
Todo List
</h2>
<div className="row my-2">
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="You can add todo Here...."
onChange={(e) => setInputData(e.target.value)}
/>
<button
className="btn btn-success"
onClick={() => {
dispatch(AddTodo(inputData));
setInputData("")
}
>
<i className="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<div className="card-body">
<ul className="list-group text-center fw-bolder">
<li className="list-group-item">Girish</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

export default Todo;

Answer 2

尝试更改您的点击。

onClick={() => {dispatch(AddTodo(inputData)); setInputData("")}}

您的setInputData在调度函数中。

Answer 3

您可以创建一个onClick处理程序来解决此问题。

const handleClick = () => {
dispatch(AddTodo(inputData); 
setInputData("");
}
<button onClick={handleClick}></button>

Answer 4

我得到了答案，我应该添加use值=｛inputData｝我的意思是

<input
type="text"
className="form-control"
placeholder="You can add todo Here...."
value={inputData}
onChange={(e) => setInputData(e.target.value)}
/>

这是的答案