React ::切换

渲染一个切换组件。

使用将  状态变量 初始化 为 。使用对象 来保存各个组件及其状态的样式。返回一个  触发事件 ，该事件 会在组件的事件被触发时更改组件的 ， 并基于，应用 对象的适当CSS规则 ，确定内容的外观 。React.useState()isToggleOnfalsestyle<button>isToggleOnonClickisToggleOnstyle

function Toggle(props) {
  const [isToggleOn, setIsToggleOn] = React.useState(false);
  const style = {
    on: {
      backgroundColor: "green"
    },
    off: {
      backgroundColor: "grey"
    }
  };

  return (
    <button
      onClick={() => setIsToggleOn(!isToggleOn)}
      style={isToggleOn ?style.on: style.off}
    >
      {isToggleOn ? "ON" : "OFF"}
    </button>
  );
}

ReactDOM.render(<Toggle />, document.getElementById('root'));