technology stack
AntDesign version: 3x
Trample record
1. @onChange
Because my Form component has been packaged with getFieldDecorator, and the data synchronization is taken over by Form, then each form control will automatically add the onChange method. Here, onChange={handleChangeType()} is added to Select, so in the handleChangeType() method , In addition to monitoring the Select, you can also monitor the data changes of other FormItems.
If you only want to monitor the current Select Item, you can bind handleChangeType onChange={handleChangeType.bind()}
<FormItem label="分类" hasFeedback {
...formItemLayout}>
{
getFieldDecorator('resourceType', {
initialValue: formDataList.resourceType || '',
rules: [
{
required: true,
message: '必选项',
},
],
})(
<Select style={
{
width: '100%' }} onChange={
handleChangeType()}>
<Option value="richtext">图文</Option>
<Option value="audio">多音频</Option>
<Option value="pdf">PDF</Option>
<Option value="h5Link">外链H5</Option>
</Select>
)}
</FormItem>
const handleChangeType = (key, value) => {
let fields = getFieldsValue()
fields[key] = value
formDataList = fields
console.log(formDataList, '表单值')
}
2. Form setFieldsValue
If FormData is changed in a custom component event, it cannot actually be changed, only setFieldsValue() can be used
const onChangeText = e => {
// console.log(e.val, '页面接收到的html')
if (e.val) {
setTimeout(() => {
// 此处只需赋值的属性名即可
setFieldsValue({
resourceHtml: e.val })
}, 300)
}
}
the code
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React from 'react'
import PropTypes from 'prop-types'
import {
Form, Input, Select, Row, Col, Icon, Button } from 'antd'
import TextEditor from 'components/TextEditor'
import {
connect } from 'dva'
import classnames from 'classnames'
import * as app from 'models/app'
const {
state } = app.default
const FormItem = Form.Item
const {
Option } = Select
const formItemLayout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 14,
},
}
const Add = ({
dispatch,
// 经 Form.create() 包装过的组件会自带 this.props.form 属性
// 注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。
form: {
getFieldDecorator, getFieldsValue, setFieldsValue, resetFields },
onBack,
onSubmit,
}) => {
let formDataList = {
resourceName: '',
resourceBanner: '',
resourceType: 'richtext',
resourceLink: '',
resourceHtml: '',
}
const handleChangeType = (key, value) => {
let fields = getFieldsValue()
fields[key] = value
formDataList = fields
console.log(formDataList, '表单值')
}
const onChangeText = e => {
// console.log(e.val, '页面接收到的html')
if (e.val) {
setTimeout(() => {
setFieldsValue({
resourceHtml: e.val })
}, 300)
}
}
const onSubmitFn = e => {
onSubmit({
formDataList })
// console.log(formDataList , '提交的表单值')
resetFields()
}
return (
<div>
<Form layout="horizontal">
<FormItem label="名称" hasFeedback {
...formItemLayout}>
{
getFieldDecorator('resourceName', {
initialValue: formDataList.resourceName || '',
rules: [
{
required: true,
message: '请填写20个字符内的名称',
max: 20,
whitespace: true,
},
],
})(<Input />)}
</FormItem>
<FormItem label="顶图" hasFeedback {
...formItemLayout}>
{
getFieldDecorator('resourceBanner', {
initialValue: formDataList.resourceBanner || '',
rules: [
{
required: true,
message: '必选项',
},
],
})(<div>图片上传</div>)}
</FormItem>
<FormItem label="分类" hasFeedback {
...formItemLayout}>
{
getFieldDecorator('resourceType', {
initialValue: formDataList.resourceType || '',
rules: [
{
required: true,
message: '必选项',
},
],
})(
<Select style={
{
width: '100%' }} onChange={
handleChangeType()}>
<Option value="richtext">图文</Option>
<Option value="audio">多音频</Option>
<Option value="pdf">PDF</Option>
<Option value="h5Link">外链H5</Option>
</Select>
)}
</FormItem>
{
formDataList.resourceType == 'h5Link' && (
<FormItem label="H5外链" hasFeedback {
...formItemLayout}>
{
getFieldDecorator('resourceLink', {
initialValue: formDataList.resourceLink || '',
rules: [
{
required: true,
message: '必选项',
},
],
})(<Input />)}
</FormItem>
)}
{
formDataList.resourceType == 'richtext' && (
<FormItem label="图文详情" {
...formItemLayout}>
{
getFieldDecorator('resourceHtml', {
initialValue: formDataList.resourceHtml || '',
rules: [
{
required: true,
message: '必选项',
},
],
})(<TextEditor onChangeText={
onChangeText} />)}
</FormItem>
)}
</Form>
</div>
)
}
FormData.propTypes = {
dispatch: PropTypes.func,
}
export default Form.create()(Add)