如何在主 React App 中使用另一个组件的 let？

Question

我是 React 初学者，我想在主组件中使用我的 formIsValid let App.js。因此，当它为 false 时，DeliveryNote 组件应该是可见的，但是当它变为 true 时，它会隐藏并显示 LoadProducts 组件

问题是我无法将状态转移到另一个组件我知道你可以使用 redux 或上下文，但我不太确定如何

  const deliveryNoteInputRef = useRef();

  const formSubmissionHandler = (event) => {
    event.preventDefault();
    const enteredDeliveryNote = deliveryNoteInputRef.current.value;

    const enteredDeliveryNoteisValid = enteredDeliveryNote.trim() === "1234";

    let formIsValid = false;

    if (enteredDeliveryNoteisValid) {
      formIsValid = true;
      console.log(formIsValid);
    }

    if (!enteredDeliveryNoteisValid) {
      console.log(formIsValid);
      return;
    }
    console.log(enteredDeliveryNote);
  };
  return (
    <Card className="login">
      <form onSubmit={formSubmissionHandler}>
        <div className="control">
          <label htmlFor="delivery_note">Load ID</label>
          <input type="text" id="delivery_note" ref={deliveryNoteInputRef} />
        </div>
        <div className="actions">
          <button className="button">Potvrdit</button>
        </div>
      </form>
    </Card>
  );
};

Answer 1

也许您可以将 formIsValid 存储在 localStorage 或 useContext 状态挂钩中并从那里获取它？通过这两种方式，您应该能够在父组件（和您的主应用程序）中获取值。

这里有一些关于在 useContext 挂钩中使用它的信息： Manage state with useContext

如何在主 React App 中使用另一个组件的 let？

How to use let from another component in the main React App?

javascript

frameworks

reactjs