Elementui-React表单重置遇坑

记录一下使用element-react表单遇到的一些坑

之前学vue的时候使用element-ui做了一个后台项目，最近刚学完react，打算用函数式组件+hooks把之前的项目重做一遍，在表单重置的时候，使用**resetFields()**发现只是把校验的错误清掉了，输入框的文本还在。

重置前：

重置后：校验错误清掉了，但是文本没有清空

解决办法

看了下官方的文档，文档里表单的案例居然也是没法重置文本，那可能就是elelment设计本身没法修改state（也可能是我太菜了，不会用），所以就只能手动清空输入框：

export default function Login() {
	const [loginFormData, setLoginFormData] = useState({username: '', password: ''})
	.....
	const loginFormReset = () => {
		/* 将用户名和密码手动清空 */
	    loginFormData.username = ''
	    loginFormData.password = ''
	    setLoginFormData({...loginFormData})	// 使用useState返回的方法修改原数据
	    loginFormRef.current.resetFields()		// 由于校验会产生错误，依然使用resetFields()方法来清除
  }
  return (
      <div className="login_container">
        <div className="login_box">
          {/*图标*/}
          <div className="avatar_box">
            <img src="./logo192.png" alt=""/>
          </div>
          {/* 表单 */}
          <Form ref={loginFormRef} model={loginFormData} rules={loginFormRules} className="login_form">
            <Form.Item prop="username">
              <Input onChange={usernameChange} value={loginFormData.username} trim={true}></Input>
            </Form.Item>
            <Form.Item prop="password">
              <Input type="password" onChange={passwordChange} value={loginFormData.password} trim={true}></Input>
            </Form.Item>

            <Form.Item className="btns">
              <Button type="primary" onClick={login}>确认</Button>
              <Button type="info" onClick={loginFormReset}>重置</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
  )
}

最后看了下git上的源码，发现好多属性、事件之类的官方的文档都没有写全，完全不如Vue版的详细，不知道后面开发团队会不会完善下