使用步骤:
- 给From表单添加ref属性,假设这里设置的ref=“addForm”
- 在满足条件的时候,通过下列方法做不同的事
①数据回显(设置值)
this.refs.addForm.setFieldsValue({name: ‘json’}) // 给一个对象,属性名为表单中的某一项
②清空数据
this.refs.addFrom.resetFields()
③获取某一表单项的值
this.refs.addFrom.getFieldValue(‘name’)
④获取多项的值
this.refs.addFrom.getFieldsValue([‘name’, ‘age’]) // 给一个数组
⑤获取整个表单的值
this.refs.addFrom.getFieldsValue() // 不传参数
// Form表单
<Form
layout='vertical'
ref='addForm'
onFinish={this.onFinish}
>
<Form.Item
name='name'
label='名字'
rules={[
{
required: true,
validator: (rule, value, callback) => this.handleName(rule, value, callback),
validateTrigger: ['onBlur', 'onChange']
}
]}
>
<Input placeholder='请输入名字' allowClear />
</Form.Item>
<Form.Item
name='age'
label='年龄'
rules={[
{
required: true,
validator: (rule, value, callback) => this.handleAge(rule, value, callback),
validateTrigger: ['onBlur', 'onChange']
}
]}
>
<Input placeholder='请输入年龄' allowClear />
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>保存</Button>
</Form.Item>
</Form>
// 我是需要在编辑的时候数据回显,所以选择在componentDidMount周期函数处理
componentDidMount () {
this.setState({
id: this.props.match.params.id
})
// 通过路由获取到的id来区分新增与编辑,有id为编辑
// 编辑的时候回显数据
if (this.props.match.params.id) {
// dataSource为数组对象结构
const data = this.state.dataSource.find(item => {
return item.key === Number(this.props.match.params.id)
})
// 手动设置Form表单的值
this.refs.addForm.setFieldsValue(data)
}
}