我在 React 中有一个模态框，它在首次呈现应用程序时显示

Question

我有一个模态框，里面有一个表单，我想在第一次呈现应用程序时关闭它。只有当我点击“添加更多”按钮时，这个模式才会打开。问题是情况恰恰相反，当我渲染应用程序时模态窗口已经打开。

我已经使用过模态框，我知道我可以使用 useState() 来切换它是否打开。

这是有关模态框的所有代码。我正在使用 React Bootstrap.

// App.tsx


const [showFormModal, setShowFormModal] = useState(false);

 const closeForm = () => {
setNewTable({});
setShowFormModal(false);}


<TableForm
      show={showFormModal}
      handleClose={closeForm}
      onInputChange={onInputChange}
      addPost={addNewTable}
    />

这是关于组件内部模态的代码：

//TableForm


    const TableForm = (
  show: any,
  handleClose: any,
  onInputChange: any,
  addPost: any
) => {
  const [validate, setValidate] = useState(false);

  const checkAndAddStarship = async (e: any) => {
    setValidate(true);
    try {
      await addPost(e);
      setValidate(false);
      handleClose();
    } catch (e) {
      window.alert(e);
    }
  };

  console.log(show);

  return (
    <Modal size="xl" centered show={show} onHide={handleClose}>
      <Modal.Header closeButton onClick={handleClose}>
        <Modal.Title>Add New Table</Modal.Title>

Answer 1

检查您在组件中收到的类型。也许做 show : boolean 而不是 show : any

Answer 2

谢谢日村，

我解决了问题：我以错误的方式将道具传递给 TableForm：基本上我告诉我的应用程序 'show' 变量是一个包含其他 3 个道具的完整对象。

这是我的错误：

 const TableForm = (
  show: any,
  handleClose: any,
  onInputChange: any,
  addPost: any
)

我只需将其更改为即可使其工作：

const TableForm = ({show, handleClose, onInputChange, addPost})

我忘记了{}

我在 React 中有一个模态框，它在首次呈现应用程序时显示

I have a Modal in React that is showing when first rendering the App

reactjs

bootstrap-modal

react-bootstrap

use-state