在反应离子中设计模态形式的最佳方法。

Question

我正在学习react，所以我正在建立一个权重跟踪器.我有不同的页面，我问一些数据。所以我想开发一个模态表单。

我已经有一个Ionic的Modal组件。所以我建立了一个ModalForm，它的头部有一个关闭、一个取消和一个确定按钮。

类似于这样

<App>
    <ModalForm>
        <Input>
    </ModalForm>
</App>

当按下 "Ok "时，该组件将通过回调把输入值给父体，该值将被验证（所以我不能在改变时给出该值），但它将需要知道孩子的输入值。

此外，父母将控制输入（和验证），这不是我喜欢的事情。

我可以让模态用一个内部开关选择什么输入来渲染，但它不能被重用在其他门类上。

应该放弃儿童，并找到另一种方式？请给我一些建议，如何复合我的组件，以实现这一结果。

谢谢你的建议

Answer 1

我已经找到了一个方法。

我有一个父组件，它就像一个包装器或装饰器，但比我的最终组件低。

interface ModalProps {
    title: string,
    show: boolean,
    setShow: Function,
    value: number | string,
    onSave: Function
}

const ModalInput: React.FC<ModalProps> = (props) => {
    var { show, setShow, title, value, onSave } = props;
    return (
    <IonPopover isOpen={show}  onDidDismiss={() => { setShow(false); }}>
        <IonContent class="ion-text-center modal-content">
            <IonCard>
                <IonCardHeader>
                    <IonCardTitle>{title}</IonCardTitle>
                </IonCardHeader>
                <IonCardContent className="text-center">
                    {props.children}
                </IonCardContent>
            </IonCard>
            <IonFooter>
                <IonButton color="light" onClick={() => { setShow(false); }}>Cancel</IonButton>
                <IonButton color="primary" onClick={() => { onSave(value); setShow(false); }}><IonIcon slot="start" icon={save} /> Save</IonButton>
            </IonFooter>

        </IonContent>
    </IonPopover>
);
};
export default ModalInput;

它需要一个道具来打开关闭模式，一个标题，一个道具来获取子值和onSave，这是一个来自app的回调.然后我写了一个更高的组件，实现了孩子们.所有的道具都到了ModalInput包装器。

interface InputProps {
    onSave: Function,
    show: boolean,
    setShow: Function,
    defaultValue: number
}
const WeightInput: React.FC<InputProps> = ({show, setShow, defaultValue, onSave}) => {
    const [value, setValue] = useState<number>(defaultValue);

    return (
    <ModalInput show={show} setShow={setShow} title="Starting weight" value={value} onSave={onSave}>
        <IonItem>
            <IonInput value={value} onIonChange={e => setValue(parseFloat(e.detail.value!))}></IonInput>
        </IonItem>
    </ModalInput>
);
}
export default WeightInput;

最后是如何使用它。

<WeightInput show={showWeight} setShow={setShowWeight} defaultValue={weight} onSave={(w:number) => setWeight(w)}/>

所以它的工作原理是这样的。

• 输入变化时，输入调用setValue来改变状态。
• 状态改变时，也会改变模式组件的道具。
• 在确定后点击模态组件将触发onSave道具，该道具直接来自于应用程序。

所以应用程序应该只关心模态的值和状态，模态组件应该只关心他的值和打开状态，并在ok时回调上级组件包含输入逻辑，并将其他道具传递给模态组件。

也许这不是最好的方法，但却是我以有限的知识所能开发的最好的方法。