React待办列表提交后输入框值未清空，已尝试setInput('')

你的输入框未和state做双向绑定——仅通过onChange更新了state，但没把state值关联到输入框的value属性，导致调用setInput('')更新state后，输入框的显示内容无法同步变化。

只需给input元素添加value={input}属性，将其转为受控组件即可解决：

const Form = (props) => {

  const [input, setInput] = useState('');

  const handleChange = e => {
    setInput(e.target.value);
  }

  const handleSubmit = e => {
    e.preventDefault();

    const newTask = {
      id: uuidv4(),
      text: input,
      completed: false
    };

    props.onSubmit(newTask);
    setInput('');
  }

  return (
    <form
      className='task-form'
      >
      <input
        className='task-input'
        type='text'
        placeholder='Enter a task'
        name='text'
        onChange={handleChange}
        value={input} {/* 新增这行绑定 */}
        />
      <button className='task-btn' onClick={handleSubmit}>Add Task</button>
    </form>
  )
}

export default Form

React中，受控组件的表单元素值由state驱动，通过value属性将state与输入框绑定后，state的更新会直接反映到输入框的显示内容上，提交后调用setInput('')就能自动清空输入框。

内容的提问来源于stack exchange，提问作者AndresM