反应输入状态不清楚如何清除输入状态答案

【问题标题】：React Input state is not clear how can i clear input state反应输入状态不清楚如何清除输入状态
【发布时间】：2021-07-18 13:26:19
【问题描述】：

如您所见，我正在使用react-redux 处理待办事项。我的应用程序运行良好，但问题是，当我单击添加按钮时，输入值没有被清除。我该如何解决这个问题？

    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;

我在应用内导入，应用是主要组件。我可以做些什么来解决我的问题？

【问题讨论】：

标签： reactjs react-redux use-state

【解决方案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;

【讨论】：

【解决方案2】：

尝试更改您的点击次数。

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

你的 setInputData 在 dispatch 函数中。

【讨论】：

【解决方案3】：

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

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

<button onClick={handleClick}></button>

【讨论】：

【解决方案4】：

我得到了我的答案我应该添加使用 值={inputData} 我的意思是

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

这就是答案

【讨论】：