返回
如何实现一个react表单同时获取多个表单的值？
前端
2023-12-17 12:32:43
在开发前端页面的时候，我们经常会遇到这样的场景：在一个页面上有多个表单，每个表单可以独自提交数据，也可以一起提交数据。这时，我们就需要将这些表单的值统一提交。
实现方法
react + antd3.x提供了一种简单的方法来实现这个功能。我们可以通过 Form.create() 方法创建一个表单组件，然后将所有需要提交的表单都嵌套在该组件中。这样，当我们提交表单组件时，就可以同时提交所有子表单的值。
例如，假设我们有一个页面，其中包含两个表单：一个用于收集用户个人信息，另一个用于收集用户地址信息。我们可以通过以下步骤实现这两个表单的统一提交：
- 首先，我们需要安装react和antd3.x库。
- 然后，我们可以创建一个新的react项目，并安装以下包：
npm install react-router-dom
- 在src目录下，我们创建一个新的文件Form.js，并输入以下代码：
import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
class FormExample extends Component {
render() {
return (
<Form>
<Input placeholder="姓名" />
<Input placeholder="年龄" />
<Input placeholder="地址" />
<Button type="primary" htmlType="submit">
提交
</Button>
</Form>
);
}
}
export default Form.create()(FormExample);
- 在src目录下，我们创建一个新的文件App.js，并输入以下代码：
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import FormExample from './FormExample';
class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/form">表单</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/form" component={FormExample} />
</div>
</Router>
);
}
}
export default App;
- 在src目录下，我们创建一个新的文件Home.js，并输入以下代码：
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div>
<h1>欢迎来到首页</h1>
</div>
);
}
}
export default Home;
- 最后，我们在index.js文件中输入以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- 现在，我们可以通过在浏览器中输入http://localhost:3000/form来访问我们的表单页面。当我们提交表单时，就可以看到所有子表单的值都被提交了。
注意事项
在使用Form.create()方法时，需要注意以下几点：
- Form.create()方法只能创建一个表单组件。
- 表单组件必须包含一个Form.Item组件，用于包裹每个需要提交的表单元素。
- 表单元素必须具有name属性，以便Form.create()方法能够正确获取表单值。
- 表单元素必须具有value属性，以便Form.create()方法能够正确设置表单值。
总结
通过react + antd3.x，我们可以轻松地实现多个表单的统一提交。这可以大大简化我们的开发工作，提高开发效率。
