antd4 用类的方式获取form

最新推荐文章于 2024-04-08 14:08:08 发布

原创最新推荐文章于 2024-04-08 14:08:08 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript #前端

react 同时被 2 个专栏收录

29 篇文章

订阅专栏

antd

11 篇文章

订阅专栏

这篇博客讨论了在React应用中遇到的问题，即如何在未使用hook的情况下，于类组件中进行表单验证和提交。作者提供了一个示例代码，展示了在不依赖`submit`方法的情况下，通过`validateFields`进行表单验证，并在按钮点击事件中调用验证方法。代码中使用了`Form.Item`和`Form`组件，并将表单引用存储在`formRef`中。

官网只给了hook的方法，项目没有用到hook,没有在form里面调用，所以不能用submint的方法

代码如下

class ActivationAfter extends Component {
  formRef = React.createRef();
handleAdd = () => { 
 const row =  this.formRef.current.validateFields();
 console.log(row)
}

render() {
  <div> 
          <Button
            onClick={() => {
              this.handleAdd();
            }}
            >
            新增数据
          </Button>
          
         <Form ref={this.formRef}>
          <Form.Item label="执行业务规则" labelCol={{ span: 4 }}
            style={{ marginBottom: 10 }}
            wrapperCol={{ span: 14 }}
          >
            <Input placeholder="选择执行业务规则" />
          </Form.Item>
        </Form>
</div> 
	
}
}

export default ActivationAfter