我无法用单击按钮呈现组件[重复]

Question

当单击按钮时，它应该呈现一个元素，但它不起作用。如果我单击，什么也不会发生，也不会触发任何错误。我在使用材料UI

组件内容是一种形式

function handleBoxRegister(){
    return (
      <div>test</div>
    )
  }

<Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={handleBoxRegister}
        >
          <AddIcon>
          </AddIcon>
          Registrar paciente
        </Button>

Answer 1

它在屏幕中间有一个div和一个带有几个按钮的侧边栏，其中一个是注册。然后当用户点击它时，屏幕中间应该会出现一个表单。

这就是state引入的地方，为了使表单从视图中出现/消失，您应该将数据（state）存储在boolean变量中，并检查它是true还是false，然后在呈现中根据变量的值显示或隐藏它。

下面我们使用&&运算符，只有当第一个值为true时，该运算符才会在其后面呈现组件。

function exmapleView (props) {
  const [isRegisterShown, setIsRegisterShown] = useState(false);
  return (
    <div>
      <Sidebar>
        <Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={() => setIsRegisterShown(true)}>
      </Sidebar>
      {isRegisterShown && <div>// Add the Register Form</div>}
      // Add Other Components here
    </div>
)
}