时间戳

首页 > 解决方案 > 我无法通过单击按钮来渲染组件

reactjs - 我无法通过单击按钮来渲染组件

问题描述

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

组件内容是一种形式

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

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

标签： reactjs

解决方案

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

这是状态出现的地方，要使表单从视图中出现/消失，您应该可以将数据（状态）存储在一个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>
)
}

推荐阅读