Question

我正在为按钮使用Material UI，并且想要在单击按钮时呈现不同的功能组件。我也在功能组件中完成所有这些操作。（是我要触发的组件）

.npm

Answer 1

您似乎想利用某种状态来有条件地呈现按钮。

如果要基于单击动作来控制按钮是否可见，请跟踪应在状态下呈现的组件，然后使用onClick处理程序切换该状态。

如果我怀疑是真的，那么这应该为您解决问题。

const Vehicle = ({vehicle}) => {

    const classes = useStyles();

  // Controls whether the drive action is rendered or not
  const [showDriveAction, setShowDriveAction] = React.useState(false)

  return showDriveAction ?
    <SharedDriveAction/> :
    <Button
      onClick= {() => setShowDriveAction(true)}
      size="small"
      color="secondary"
      className={classes.button}
    >
      Drive
    </Button>
}

export default Vehicle;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

您可以使用具有反应状态的条件渲染。

，如果您要切换，请使用类似的内容：

const Vehicle = ({ vehicle }) => {

  const classes = useStyles();
  const [showDrive, setShowDrive] = React.useState(false)

  return (
    <div>
     {showDriveAction ?
       <SharedDriveAction/> :
       <Button
         onClick= {() => setShowDriveAction(!showDriveAction)}
         size="small"
         color="secondary"
         className={classes.button}
       >
         Drive
       </Button>}
    </div>
  )
}

Answer 3

更简单地说，让您的总体组件的状态变量的状态变量为open。在OnClick上，钩住this.setState（用于类组件）以切换open变量。在下面的示例中，可以很容易地处理内联条件渲染。

{  props.open ? <Component/> : null }

如何使用MaterialUI Button调用功能组件中按钮的onClick按钮

3 个答案: