前端笔记

计算窗口 2/3 宽度

const useWidth = () => {
  const [w, setW] = useState(window.innerWidth * 0.66);
  useEffect(() => {
    const resize = () => setW(window.innerWidth * 0.66);
    window.addEventListener('resize', resize);
    return () => window.removeEventListener('resize', resize);
  }, []);
  return w;
};

antd v6 动态表单 set field value

<Form.Item label={"Demo List"}>
  <Form.List name={["field_a"]}>
    {(subFields, subOpt) => (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          rowGap: 16,
        }}
      >
        {subFields.map((subField) => (
          <Card key={subField.key}>
            <Form.Item
              label="Name"
              name={[subField.name, "name"]}
              rules={[{ required: true }]}
            >
              <Input placeholder="please enter name" />
            </Form.Item>
            <Form.Item<string>
              label="选择年龄"
              name={[subField.name, "age"]}
              rules={[{ required: true }]}
            >
              <Select
                options={ages.map((item) => ({
                  value: item.value,
                  label: item.label,
                }))}
                onChange={(value, option) => {
                  handleOptionChange(value, subField.name);
                }}
              />
            </Form.Item>
            <Form.Item
              name={[subField.name, "year"]}
              rules={[{ required: true }]}
              hidden
            >
              <Input />
            </Form.Item>

            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <CloseOutlined
                onClick={() => {
                  subOpt.remove(subField.name);
                }}
              />
            </div>
          </Card>
        ))}
        <Button type="dashed" onClick={() => subOpt.add()} block>
          + Create Item
        </Button>
      </div>
    )}
  </Form.List>
</Form.Item>;

const handleOptionChange = (value: any, idx: number) => {
  form.setFieldValue(["field_a", idx, "year"], value);
};