反应功能组件状态问题答案

【问题标题】：React fucntional component state issue反应功能组件状态问题
【发布时间】：2020-04-17 10:09:31
【问题描述】：

一直卡在这上面。我正在尝试使用 React 功能组件制作一个简单的日期和时钟。我还添加了一个可以打开和关闭日期的开关，但现在它不起作用。我一直在尝试使用 material-ui，这目前非常令人困惑，我认为 switch 上的 onChange 属性不起作用，但我看到状态也不起作用。选中的设置为 true，因此不应显示日期，但事实并非如此。如果有人能找到我遗漏的一些小而明显的错误，我将不胜感激。

import React from 'react';
import './Time.css';
import Clock from "react-live-clock";
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

function Time() {
  const [checked, setStatus] = React.useState(true);
  const today = new Date(),
  date = `${today.toDateString()}`;
  const style = {
    display: "none"
  };
  const none = {};
  return (
    <div className="all-time">
    <FormControlLabel
        control={
          <Switch
            onChange={() => setStatus(!checked)}
            name="checked"
            color="primary"
          />
        }
      />
    <div className="clock">
        <Clock className="time" date={""} format={"HH:mm:ss"} ticking={true} timezone={"Europe/Vilnius"} />
        <h1 className="date" style={checked === true ? {style} : {none}}>{date}</h1>
    </div></div>
  )
}

export default Time;

【问题讨论】：

也许添加display:'inline-block' 或none 中的内容会有所帮助
你可能想这样改变它：{checked?style:none}
呵呵，果然解决了。非常感谢。

标签： reactjs

【解决方案1】：

您需要将值传递给开关

<Switch
  value={checked}
  onChange={() => setStatus(!checked)}
  name="checked"
  color="primary"
/>

【讨论】：