reactjs - 反应输入状态不清楚如何清除输入状态

Question

如您所见，我正在使用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;

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

标签： reactjsreact-reduxuse-state

Answer 1

发生这种情况是因为您使用的是setInputData("")inside of dispatch：

  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;