根据状态更改对象中的元素

【问题标题】：Change An element in a object based on a state根据状态更改对象中的元素
【发布时间】：2021-06-14 10:31:19
【问题描述】：

我想根据状态更改 remoteOptions 对象中的工具栏选项，以便我能够根据单击按钮时更改的状态隐藏和显示它。我如何做到这一点？

remoteOptions = {
  player: {
    height: "100%",
    width: "100%",
  },
  resizer: false,
  toolbar: {
    displayMode: false,
  },
};
<div>
  <button id="start-canvas">Start Canvas Streaming</button>
  <button id="stop-canvas">Stop Canvas Streaming</button>
</div>

【问题讨论】：

你想通过修改工具栏的样式来改变它吗？可以添加工具栏的代码吗？

标签： javascript reactjs button state

【解决方案1】：

首先定义状态， const [show, setShow] = useState(false) ;//false 表示 displayMode 最初为 false。

然后在remoteOptions，

 displayMode : show,

然后改变按钮点击的状态，

<button id="start-canvas" onClick={()=> setShow(true)}>Start Canvas Streaming</button>

 <button id="stop-canvas" onClick={()=> setShow(false)}> Stop Canvas Streaming</button>

【讨论】：