输入框无法清空，有没有 react 一点的写法？

Question

这个代码可以用，但是感觉不太 react

return (
    <form onSubmit={(e) => {
      e.preventDefault()
      const form = e.target
      const title = form.title.value.trim()
      if(!title) return;
      todoStore.addTodo(title)
      form.title.value = ''
    }}><input placeholder="输入任务" name="title"/></form>
  )

下面的代码，清空不了 input

const NewTask = observer(({ todoStore }) => {
  const [title, setTitle] = useState("");
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      if(!title.trim()) return;
      console.log(e.target)
      todoStore.addTodo(title)
      setTitle("")
    }}><input placeholder="输入任务" onChange={(e) => setTitle(e.target.value.trim())}/></form>
  )
})

Answer 1

其实你写得差不多了，加一个逻辑即可：value={title}，这样构造成受控组件

const NewTask = observer(({ todoStore }) => {
  const [title, setTitle] = useState("");
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      if(!title.trim()) return;
      console.log(e.target)
      todoStore.addTodo(title)
      setTitle("")
    }}><input placeholder="输入任务" value={title} onChange={(e) => setTitle(e.target.value.trim())}/></form>
  )
})

参考官方文档：https://reactjs.org/docs/form...