Question

在React应用程序中，大多数组件应该是“哑巴”，也就是它们不应该知道它们是应用程序的一部分，并且应该具有允许它们在其他应用程序中重复使用的通用属性。

例如，我可能有一个类似“哑巴”的表单组件：

function MyForm(props){
    return (
        <form>
            <input type="number" value={props.value}/>
        </form>
    );
}

当我在此之上添加“智能”（状态感知）组件时，可以使用observer()使它知道mobx状态：

import { observer } from "mobx-react"
import React from "react";

import myStore from "./store";
import MyForm from "./myForm";

const MyApp = observer((props) => {
    const store = React.useContext(myStore);
    return (
        <MyForm value={store.formValue}>
    );
});

但是，我的表单组件也需要能够更新状态，因为它是输入。但是，如果MyForm保持“哑巴”状态，它将无法访问商店，并且无法为其道具分配值，因为在mobx之外这毫无意义。然后如何在mobx中创建一个“哑”输入组件来更新商店状态？

在Mobx中实现“哑”输入组件

0 个答案: