[Field]Field is not compatible with Dialog.show

[jdkahn]

Component

Field

Reproduction link

https://riddle.alibaba-inc.com/riddles/5eb1e38d

Steps to reproduce

• Create a component with a field
• Use Dialog.show to an input with a field.init
• input will not update

Cause: field is re-rendering the outer component, with does not re-render the contents of Dialog.show.

[jdkahn]

Solution: We do not recommend using field with Dialog.show, instead use the Dialog component directly.

If you must use Dialog.show, we suggest creating a component that contains the field and pass that to Dialog.show. And use callbacks and function props to communicate between the parent and child components.

class Demo2 extends React.Component {
    field = new Field(this);

    constructor(props) {
        super(props);
        if (props.onMount) {
            props.onMount(this.field);
        }
    }

    render() {
        const { init } = this.field;

        return (
            <Input
                    {...init('input2', { initValue: 'd'})}
                />
        )
    }
}

class Demo extends React.Component {
    componentDidMount() {
      Dialog.confirm({
        content: (
            <Demo2 onMount={(field) => this.field = field}/>
        ),
        onOk: this.validate.bind(this),
      })
    }

    validate() {
        if (this.field) {
            this.field.validate();
        }
    }

    render() { ... }
}