0

您好，我知道这是很多代码，我试图只包含必要的位。我第一次使用 React 路由器，并且我有一个带有输入复选框的链接组件。我只是想更改该复选框的真/假状态，但来自相应的模块组件。因此，在模块 1 中将单击完成，然后在 menu.js 模块 1 的复选框中选中，而不检查所有其他...我已经坚持了 2 天。也许我应该将输入移到 Link 组件之外？

APP.JS----------------

function App() {
  return (
    <AppProvider>
      <Switch>
        <Route exact path="/" component={Menu} />
        <Route path="/Module/:num" component={Template} />
      </Switch>
    </AppProvider>
  );
}

菜单.JS----------------

export default function Menu() {
  const modules = [
    {
      title: `Introduction`,
      subtitle: "Lesson 1",
    },
    {
      title: `Overview`,
      subtitle: "Lesson 2",
    },
    {
      title: `HR`,
      subtitle: "Lesson 3",
    },
 
  const context = useContext(AppContext);

  return (
    <>
        {modules.map((module, index) => (
           <Link key={index} to={`/Module/${index + 1}`} className={styles.menuCard}>
             <h2>{module.title}</h2>
             <p>{module.subtitle}</p>
             <input key={index} type="checkbox" checked={context.completed1} />
           </Link>
         ))}
    </>
  );
}

模板.JS----------------

const components = {
  Module1,
  Module2,
  Module3,
};

const providers = {
  Mod1Provider,
  Mod2Provider,
  Mod3Provider,
};

export default function Template({ match }) {
  const {
    params: { num },
  } = match;

  const MyContext = providers["Mod" + num + "Provider"];
  const Template = components["Module" + num];

  return (
    <MyContext>
      <Template number={num} />
    </MyContext>
  );
}

模块 1, 2 ,3 看起来很相似--------

return (
    <>
        <button
          onClick={() => {
           context.completionHandler1(true);
          }}
        >
          Done
      </div>
    </>
  );

APPCONTEXT-----必须有更好的方法来做到这一点，但反应路由器会向它扔扳手？？？

function AppProvider(props) {
  const [number, setNumber] = useState();
  const [completed1, setCompleted1] = useState(false);
  const [completed2, setCompleted2] = useState(false);
  const [completed3, setCompleted3] = useState(false);

  function completionHandler1(value) {
    setCompleted1(value);
  }
  function completionHandler2(value) {
    setCompleted2(value);
  }
  function completionHandler3(value) {
    setCompleted3(value);
  }

  const value = {
    number: number,
    completed1: completed1,
    completed2: completed2,
    completed3: completed3,
    completionHandler1: completionHandler1,
    completionHandler2: completionHandler2,
    completionHandler3: completionHandler3,

  };

  return <AppContext.Provider value={value}>{props.children}</AppContext.Provider>;
}

export { AppContext, AppProvider };
4

0 回答 0