Question

一直坚持下去。我正在尝试使用React功能组件创建一个简单的日期和时间时钟。我还添加了一个开关，该开关可以打开和关闭日期，但现在不起作用。我一直在尝试使用material-ui，它目前非常令人困惑，并且我认为switch的onChange属性无法正常工作，但是我看到状态也无法正常工作。 Checked设置为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;

Answer 1

您需要将值传递给开关

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

反应功能组件状态问题

1 个答案: