模态在第二次点击后工作

Question

我正在使用 Reactstrap Modal 进行注册。第一次点击按钮“注册”工作正常，模式打开。关闭模态框并再次打开后，它在第一次单击时不起作用，只有在它之后才起作用，所以我必须双击才能打开。如果我将所有代码放在一个文件中，即我的 Home.tsx，那么它工作正常。但我希望 Modal（在本例中为 Register.tsx）和 Home.tsx 位于单独的文件中。分成 2 个文件后，出现此问题。我该如何解决这个问题？

这里是代码沙箱：https://codesandbox.io/s/hopeful-star-27wir?file=/src/Home.tsx

Answer 1

不要重复状态。在 Register 组件中使用 toggle 值和回调，因为您已经在传递它。

Working demo

代码 sn-p

function Register(props: any) {
  const [firstName, setFirstName] = useState<string>("");

  // const [modal, setModal] = useState(props.modal); // no need of this
  //console.log(modal);

  const validateSignUp = () => {
    if (firstName === "") {
      props.toggle(true);
    } else {
      props.toggle(false);
    }
  };
  return (
    <Modal isOpen={props.modal} toggle={props.toggle}>
      <ModalHeader>Sign Up</ModalHeader>
      <ModalBody>
        <FormGroup>
          <Label>First Name</Label>
          <Input
            type="text"
            onChange={(e: any) => setFirstName(e.target.value)}
          />
        </FormGroup>
      </ModalBody>
      <ModalFooter>
        <Button color="success" onClick={validateSignUp}>
          Sign Up
        </Button>
        <Button
          color="danger"
          onClick={() => {
            // setModal(false); // not required
            props.toggle(false);
          }}
        >
          Cancel
        </Button>
      </ModalFooter>
    </Modal>
  );
}

Answer 2

当通过“取消”按钮取消模态时，您基本上是在更新模态组件的状态，而不是更新Home 组件的状态。你可以做的是在“取消”点击你有一个功能，它会做这样的事情：

const onCancelModal = () => {
  setModal(false);
  props.toggle(false);
}

这样就可以了，这里有一个完整代码的链接。

https://codesandbox.io/s/blissful-brown-io0dz?file=/src/Register.tsx

希望这会有所帮助。