antd的Form组件中的onValuesChange函数不响应是怎么回事

Question

antd的Form组件中的onValuesChange函数不响应是怎么回事
antd版本：
antd.version
"4.4.0"
`

getItemOptions(item) {
    const { eventSource, emergency, eventLevel, eventAttributes, data, disabled } = this.props
    const ItemComponent = item.component
    let r = null
    let initialValue = null
    let rules = [{ required: item.required, message: item.displayName }]
    switch (item.name) {
        case 'eventSource': {
            r = _.map(eventSource, (value, key) => <Option value={key}>{value}</Option>)
            initialValue = data.eventSource || _.keys(eventSource)[0]
            break
        }
        case 'emergency': {
            r = _.map(emergency, (value, key) => <Option value={key}>{value}</Option>)
            initialValue = data.emergency || _.keys(emergency)[0]
            break
        }
        case 'eventLevel': {
            r = _.map(eventLevel, (value, key) => <Option value={key}>{value}</Option>)
            initialValue = data.eventLevel || _.keys(eventLevel)[0]
            break
        }
        case 'eventAttributes': {
            r = _.map(eventAttributes, (value, key) => <Option value={key}>{value}</Option>)
            initialValue = data.eventAttributes || _.keys(eventAttributes)[0]
            break
        }
        case 'eventCategory': {
            r = _.map(this.eventType, (value, key) => <Option value={key}>{key}</Option>)
            initialValue = data.eventCategory
            item.componentProps['onChange'] = this.handleChange
            break
        }
        case 'eventSubCategory': {
            r = _.map(this.state.eventSubCategory, c => <Option value={c.subLevelEventType}>{c.subLevelEventType}</Option>)
            initialValue = data.eventSubCategory
            break
        }
        case 'eventRoad': {
            // r = _.map(this.eventRoad, c => <Option value={c.NAME}>{c.NAME}</Option>)
            initialValue = data.eventRoad
            break
        }
        case 'inTheStreet': {
            initialValue = data.inTheStreet
            break
        }
        case 'community': {
            initialValue = data.community
            break
        }
        case 'inTheGrid': {
            initialValue = data.inTheGrid
            break
        }
        case 'eventLocation': {
            initialValue = data.eventLocation
            break
        }
        case 'eventDesc': {
            initialValue = data.eventDesc
            break
        }
        case 'preDisposalPictures': {
            item.componentProps['onChange'] = this.handlePicChange
            initialValue = this.state.preDisposalPictures
            break
        }
        case 'preDisposalVideo': {
            item.componentProps['onChange'] = this.handleVideoChange
            initialValue = this.state.preDisposalVideo
            break
        }
        default: break
    }
    return {
        initialValue: initialValue,
        rules: rules,
        component: (<ItemComponent defaultValue={initialValue}{...item.componentProps} disabled={disabled}>{r}</ItemComponent>)
    }
}
onValuesChange = (changedValues, allValues) => {
    console.log('++++++++++++++changedValues, allValues', changedValues, allValues)
}
    handleSubmit = (values, type) => {
    // 表单验证
    console.log('handleSubmit values', values, type)
    this.formRef.current.validateFields().then((val) => {
        console.log('Received values of form: ', val);
        
    }).then((err) => {
        console.log(err)
    });
}
getFormItems() {
    return _.map(registerEventFormItems, item => {
        const itemOptions = this.getItemOptions(item)
        return (
            <Form.Item
                key={item.name}
                label={item.displayName}
                name={item.name}
                rules={itemOptions.rules}
                initialValue={itemOptions.initialValue}
                {...item.formItemOptions}
            >
                {
                    (itemOptions.component)
                }
            </Form.Item>
        )
    })
}
render() {
    const formItems = this.getFormItems()
    return <div className="disposal-tracking-detail">
        <div className="detail-content">
            <div className="disposal-register-form">
                <Form
                    ref={this.formRef}
                    onValuesChange={this.onValuesChange}
                >
                    {formItems}
                    {
                        disabled ? null :
                        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                            <Button
                                disabled={submitting}
                                type="primary"
                                onClick={this.handleSubmit.bind(this, 'paidan')}
                            >
                                {collaborativeLinkage.paidan}
                            </Button>
                            <Button
                                disabled={submitting}
                                type="primary"
                                onClick={this.handleSubmit.bind(this, 'zhuanban')}
                            >
                                {collaborativeLinkage.zhuanban}
                            </Button>
                            <Button
                                disabled={submitting}
                                type="primary"
                                onClick={this.handleSubmit.bind(this, 'save')}
                                htmlType="submit"
                            >
                                {commonOperation.save}
                            </Button>
                        </Form.Item>
                    }
                </Form>
            </div>
        </div>
    </div>
}

`

Answer 1

给你的<Form.Item>标签都加上name再试一试