Skip to content

[Bug report] 作为受控组件时,当初始值为 undefined 的时候不应该进行自动选择 #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mashirozx opened this issue Jun 30, 2023 · 6 comments

Comments

@mashirozx
Copy link

在以下示例中,初始化页面的时候会自动选择第一个选项:

import { Segmented } from 'antd';
import type { FunctionComponent } from 'react';
import { useState } from 'react';

const Playground: FunctionComponent = () => {
  const [value, setValue] = useState<string | number | undefined>(undefined);
  
  return (
    <>
      <Segmented
        options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']}
        value={value}
        onChange={setValue}
      />
    </>
  );
};

export default Playground;

这会导致一个问题:在 pro-component 的 ProFormSegmented 选项上,表单初始化的时候自动进行了视图层面的选择,但是没有触发 form instance 的数据更新,此时 segmented 组件的“是”选项无法再次被点击触发选择,form instance 的数据始终是 undefined

image
@mashirozx
Copy link
Author

should be fixed in #176

@afc163
Copy link
Member

afc163 commented Jun 30, 2023

Segmented 和 Radio 不太一样,更像是 Switch 没有未选状态(Switch 是要么是要么否,没有 undefined)。否则上来是空白的用户不知道这个组件怎么用。

@mashirozx
Copy link
Author

mashirozx commented Jun 30, 2023 via email

@afc163
Copy link
Member

afc163 commented Jun 30, 2023

主要是不太好办 <Segmented value={undefined} /> 不知道怎么设计,不能直接放没有白色块的灰底的。

<Switch value={undefined} /> 还能当 <Switch value={false} /> 来理解。

@mashirozx
Copy link
Author

实际上我们的组件是这样用的
image
可能和你们设计的用法不太一样,但是之所以选择这个组件而不用 radio 是因为这个更好看一点。

@afc163
Copy link
Member

afc163 commented Jul 1, 2023

这个默认 UI 效果,用户很难知道这里是可点的,不建议这样用。

我建议你增加一个 未选择 作为默认选中项。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants