Question

[Mycode]（https://codesandbox.io/s/romantic-kowalevski-fp00l?file=/src/App.js）

我正在通过制作待办事项列表应用程序来练习React。
当我按Enter键时，我希望输入为空。但这没用。

这是我的整个代码：

const Todo = ({ text }) => {
  return (
    <div>
      <span>{text}</span>
    </div>
  );
};

const InputText = ({ addTodo }) => {
  const [txt, setTxt] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!txt) return;
    addTodo(txt);
    setTxt("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => setTxt(e.target.value)}></input>
    </form>
  );
};

function App() {
  const [todos, setTodos] = useState([]);
  const addTodo = (text) => {
    const newTodos = [...todos, text];
    setTodos(newTodos);
  };
  return (
    <>
      <div className="todo-list">
        {todos.map((val, idx) => {
          return <Todo key={val + idx} text={val} />;
        })}
        <InputText addTodo={addTodo} />
      </div>
    </>
  );
}

链接的第17行，setTxt（“”）;不会更改txt的状态。
我该如何解决？

Answer 1

这不是“受控”组件，因为您没有在value上使用input属性。

尝试

      <input type="text" onChange={e => setTxt(e.target.value)} value={txt} />

https://reactjs.org/docs/forms.html

Answer 2

您实际上需要将输入值设置为您的状态。

尝试类似

urlpatterns=[
           path('flower/<str:A>/<str:B>/<int:C>/<int:D>',views.flower,name='flower') 
            ]

我希望它会有所帮助。

useState不会在React中更改状态

2 个答案: