React再ant design 中弹窗把子组件表单的数据传递给父组件

谁践踏了优雅 2022-12-28 07:37 200阅读 0赞

## 父组件 ##

handleOk = () => {
           const changeValue = this.formRef.current.getFieldValue('categoryName')
    //    取到子组件的输入框的值
    }
     render() {
        return (
        <Modal title={this.state.modalName}
           visible={this.state.visible}
           onOk={this.handleOk}
           onCancel={this.hideModal}
        >
           <AddForm name={this.state.currentName}
                    setForm={(form) => this.formRef = form} // 这句话就是拿到子组件的form功能，传 递给一个变量 formRef，可以随意取名字
           >
           </AddForm>
        </Modal>
        )
    }

## 其中 AddForm是子组件类 ##

import React from 'react'
    import { Form,  Input } from 'antd';
    export default class AddForm extends React.Component {
        formRef = React.createRef();
        UNSAFE_componentWillMount() {
            this.props.setForm(this.formRef) // 把form的功能传递给父组件，setForm是父组件在传参时的函数名
        }
        show = () => {
            setTimeout(()=>{ // 不然会取不到this.formRef.current的值报错
                // 防止出先下一次弹窗的输入框的值还是上次的
                this.formRef.current.setFieldsValue({
                    categoryName:this.props.name
                })
            })
        }
        render() {
           this.show()
            return (
                <Form 
                ref={this.formRef} // 定义form
                name="control-ref"
                >
                    <Form.Item
                        label="分类名称"
                        name="categoryName"
                        
                    >
                        <Input placeholder="请输入" style={
       { width: 300 }}></Input>
                    </Form.Item>
                </Form>
            )
        }
    }

主要是记录怎么父组件和子组件的form传值，以及解决一个连续点开输入框的值不改变的问题:

### 这是问题复现 ###

![问题情况][20201215152813205.gif]

###  这是解决之后 ###

![解决问题后][20201215153027282.gif]

[20201215152813205.gif]: /images/20221120/f4337eb88a4747f0aa0b7384dd50dd2d.png
[20201215153027282.gif]: /images/20221120/c9dd08d06c45479faa146a01b5fc81d7.png