0

我正在使用 Ant 设计 - 带有 React 的表单和模态组件。

表单包装组件：

class InsertForm extends React.Component{
    render(){
        const formItemLayout = {
            labelCol: { span: 24 },
            wrapperCol: { span: 24},
        };
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Form.Item
                    {...formItemLayout}
                    label="Title"
                >
                    {getFieldDecorator('title', {

                    })(
                        <Input placeholder="Title" />
                    )}
                 </Form.Item>
......
            </div>
        )
    }
}
const InsertFormWrapper = Form.create()(InsertForm);

我在同一个文件中的另一个组件中调用这个组件（这就是我不导出表单组件的原因）Modal，我正在使用wrappedComponentRef：

export default class InsertCont extends React.Component{
    constructor(props){
        super(props);
        console.log(this.form) // Undefined
    }
    insert = () => {
            console.log(this.form); // Not undefined
        }
    render(){
        <Modal
            ...{modalProps}
            onOk={this.insert}
        >
            <InsertFormWrapper
                wrappedComponentRef={(form) => this.form = form}
            />
        </Modal>
    }
}

问题是在构造函数中 refthis.form是未定义的，但是如果模式打开并且单击 OK 按钮 - onOk={this.insert} ref 不是未定义的。

4

2 回答 2

1

它在构造函数中未定义的原因是，当您到达构造函数时，您的代码只定义了InsertCont，但还没有调用render()，这是wrappedComponentRef集合的地方this.form

请参阅The React Lifecycle: Mounting以了解为什么会这样。当创建任何 React 组件时，调用函数的顺序如下：

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
于 2019-02-16T02:42:11.130 回答
1

顺便说一句，我没有完全查看您的问题或代码，但我遇到了同样的问题并解决了它，所以我想我知道出了什么问题。

您不能将带有包装器的组件传递给其他组件。我认为它必须是它自己的路线（在BrowserRouter）。

意味着问题出在包装器组件中...这里->

const InsertFormWrapper = Form.create()(InsertForm);

然后在InsertCont组件的渲染中使用它...这里->

render() {
        <InsertFormWrapper
            wrappedComponentRef={(form) => this.form = form}
        />
    </Modal>
}

你有几个解决方案

  • 删除包装器并找到另一种方法来实现您所需要的
  • 以某种方式使组件成为自己的路线
  • 将整个组件冲入垃圾箱

做出明智的选择 ;）

于 2019-09-03T12:27:14.357 回答