misc-2025-09

CSS属性选择器

下面是一个属性选择器的示例，选择具有属性title且其值为"Sports"的元素

1	const elements = document.querySelectorAll('[title="Sports"]');

JS中如何交换两个变量？

可以使用ES6的解构赋值来交换变量的值。

let a = 1;
let b = 2;

// 交换前
console.log('交换前:', a, b);

// 交换
[a, b] = [b, a];

// 交换后
console.log('交换后:', a, b);

React中如何使用条件渲染

所谓条件渲染是指满足某个条件时才渲染某个组件。比如当用户登录后，可以渲染用户的个人信息页面，否则渲染登录页面。

1	{isLoggedIn ? <Home /> : <Login />}

Ant Design中Form.Item的valuePropName属性

通常来说，Ant Design中的控件，比如Input、Select等，其值都是通过value属性来控制的，但是有一些控件没有value属性，比如Switch、Checkbox等。这时就需要使用valuePropName属性来指定控件的值属性。否则提交的时候无法取得对应的控件值。

看下面的代码，这是一个简单的登录框，包含用户名、密码、记住我和提交按钮，你会发现，无论记住我是否选中，当点击提交按钮时，打印的结果中的remember都是false。

const Login: React.FC = () => {
  const handleSubmit = async (values: LoginParams) => {
    console.log('登录信息:', values);
  };
  return (
    <Form
      name="login"
      initialValues={{ remember: true }}
      onFinish={handleSubmit}
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item name="remember" noStyle>
        <Checkbox>记住我</Checkbox>
      </Form.Item>
      <Form.Item>
        <Button htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  );
};

原因就是Checkbox不是使用value来记录它的值，它使用的是checked(html底层如此，详情看这里)

解决办法，只需要给Form.Item添加valuePropName="checked"属性即可，代码如下，这时我们再点击提交按钮，打印的结果中remember的值就会根据复选框的选中状态而变化了。

1
2
3

<Form.Item name="remember" valuePropName="checked" noStyle>
  <Checkbox>记住我</Checkbox>
</Form.Item>

还有哪些控件需要使用valuePropName属性呢？比如Rate、Slider等控件也需要使用valuePropName来指定值属性。

Switch
Rate
Slider
Transfer

Form.Item的工作原理

使用Ant Design中的Form.Item包裹组件，且在Form.Item中指定name属性后，Form.Item会自动将组件的值和Form进行绑定。也就是说，组件的值会自动同步到Form中，Form的值也会自动同步到组件中。

不能使用组件的onChange收集value，应该使用Form级别的onValuesChange来收集表单的值变化。
不能使用defaultValue属性来设置初始值，应该使用initialValues属性来设置。
不能在Form.Item中直接使用value属性来设置组件的值，应该使用form.setFieldsValue来设置组件的值。
使用htmlType='submit'的按钮来提交表单，点击此按钮会触发表单的onFinish事件。onFinish函数中的values参数会接收到表单的所有值。

Form.Item如何寻找内部控件

本以为Form.Item会自动寻找第一个子元素作为控件。但是第三个列子说明不是这样的。

这样不可以，username的值始终是undefined。

<Form.Item name="username">
  <div>This is title</div>
  <Input placeholder="用户名" />
</Form.Item>

这样可以：

<Form.Item name="username">
  <div>
    <Input placeholder="用户名" />
  </div>
</Form.Item>

这样也可以

<Form.Item name="username">
  <div>
    <div>This is title</div>
    <Input placeholder="用户名" />
  </div>
</Form.Item>