时间戳

首页 > 解决方案 > React Hooks：更改多个项目的状态

javascript - React Hooks：更改多个项目的状态

问题描述

我有一个图标列表。当我单击其中一个时，我希望它：

1/ 将状态更改为白天或黑夜

2/ 将图标图像更改为太阳或月亮。

但是使用我编写的代码，如果我单击一个，它会更改所有图标图像，并且只有一个状态与所有状态相关联。

我该怎么做，每个图标都有自己的状态，当我点击图标时，只有点击的图标会变成月亮或太阳，而不是全部？

我的代码：

export default function MyModal() {
  const [isVisible, setVisible] = useState(false);
  const [isDay, setDay] = useState(true);
  const { RangePicker } = DatePicker;
  const { Option } = Select;
  const style = {
    verticalAlign: "middle",
    marginRight: 10,
  };

  function handleDayNight() {
    isDay === true ? setDay(false) : setDay(true);
    console.log("isDay =", isDay);
  }
  function handleSelectChange(value) {
    console.log(`selected ${value}`);
  }

  function handleCheckChange(checkedValues) {
    console.log("checked =", checkedValues);
  }

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        Add an exception
      </Button>
      <Modal
        title="Add an exception"
        style={{ top: 20 }}
        visible={isVisible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <p>Exceptions name</p>
        <Input placeholder="80% Wednesday" />
        <p style={{ marginTop: 10 }}>Select date</p>
        <RangePicker onChange={([date]) => console.log(date)} />
        <p style={{ marginTop: 10 }}>Frequency</p>
        <Select
          defaultValue="Weekly"
          style={{ width: 120 }}
          onChange={handleSelectChange}
        >
          <Option value="daily">Daily</Option>
          <Option value="weekly">Weekly</Option>
          <Option value="monthly">Monthly</Option>
        </Select>
        <Divider />
        <Checkbox.Group style={{ width: "100%" }} onChange={handleCheckChange}>
          <div>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Monday">Monday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Tuesday">Tuesday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Wednesday">Wednesday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Thursday">Thursday</Checkbox>
            <br></br>
            <Checkbox value="Friday">Friday</Checkbox>
            <br></br>
            <Checkbox value="Saturday">Saturday</Checkbox>
            <br></br>
            <Checkbox value="Sunday">Dimanche</Checkbox>
          </div>
        </Checkbox.Group>
      </Modal>
    </div>
  );
}

标签： javascriptreactjsreact-hooks

解决方案

为每个组件使用单独的组件，因此您可以在这些组件中拥有单独的单独状态。例如，替换所有

{isDay === true ? (
    <Sun style={style} onClick={handleDayNight} />
) : (
    <Moon style={style} onClick={handleDayNight} />
)}

和

<SunMoon style={style} />

const SunMoon = ({ style }) => {
  const [isDay, setDay] = useState(true);
  const handleDayNight = () => setDay(!isDay);
  return isDay
    ? <Sun style={style} onClick={handleDayNight} />
    : <Moon style={style} onClick={handleDayNight} />;
};

推荐阅读