feat(components): 添加默认选中功能
- 在 Check、Radio、RadioGroup 和 Segments 组件中添加默认选中值属性 - 使用 onMount 在组件挂载时设置默认选中值 - 优化了组件的初始化逻辑,确保默认值能够正确显示
This commit is contained in:
@@ -5,6 +5,7 @@ import {
|
||||
createMemo,
|
||||
createSignal,
|
||||
mergeProps,
|
||||
onMount,
|
||||
ParentComponent,
|
||||
ParentProps,
|
||||
Show,
|
||||
@@ -14,6 +15,7 @@ import { Dynamic } from 'solid-js/web';
|
||||
interface CheckBoxProps {
|
||||
name?: string;
|
||||
checked?: boolean;
|
||||
defaultChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: (checked?: boolean) => void;
|
||||
}
|
||||
@@ -40,6 +42,11 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
|
||||
const originalChecked = createMemo(() => mProps.checked);
|
||||
const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
if (isNotNil(mProps.defaultChecked)) {
|
||||
setInternalChecked(mProps.defaultChecked);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
|
||||
setInternalChecked(originalChecked());
|
||||
|
@@ -5,6 +5,7 @@ import {
|
||||
createMemo,
|
||||
createSignal,
|
||||
mergeProps,
|
||||
onMount,
|
||||
ParentComponent,
|
||||
ParentProps,
|
||||
Show,
|
||||
@@ -14,6 +15,7 @@ import { Dynamic } from 'solid-js/web';
|
||||
interface RadioProps {
|
||||
name?: string;
|
||||
checked?: boolean;
|
||||
defaultChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: (value?: boolean) => void;
|
||||
}
|
||||
@@ -40,6 +42,11 @@ const Radio: ParentComponent<RadioProps> = (props) => {
|
||||
const originalChecked = createMemo(() => mProps.checked);
|
||||
const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
if (isNotNil(mProps.defaultChecked)) {
|
||||
setInternalChecked(mProps.defaultChecked);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
|
||||
setInternalChecked(originalChecked());
|
||||
|
@@ -7,6 +7,7 @@ import {
|
||||
Index,
|
||||
JSX,
|
||||
mergeProps,
|
||||
onMount,
|
||||
Show,
|
||||
} from 'solid-js';
|
||||
import Radio from './Radio';
|
||||
@@ -20,6 +21,7 @@ interface RadioGroupProps {
|
||||
name?: string;
|
||||
options?: Option[];
|
||||
value?: Option['value'];
|
||||
defalutValue?: Option['value'];
|
||||
disabled?: boolean;
|
||||
onChange?: (value?: Option['value']) => void;
|
||||
}
|
||||
@@ -36,6 +38,11 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
|
||||
const originalValue = createMemo(() => mProps.value);
|
||||
const [selectedValue, setSelectedValue] = createSignal<Option['value'] | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
if (isNotNil(mProps.defalutValue)) {
|
||||
setSelectedValue(mProps.defalutValue);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (isNotNil(originalValue()) && originalValue() !== selectedValue()) {
|
||||
setSelectedValue(originalValue());
|
||||
|
@@ -8,6 +8,7 @@ import {
|
||||
Index,
|
||||
JSX,
|
||||
mergeProps,
|
||||
onMount,
|
||||
Show,
|
||||
} from 'solid-js';
|
||||
|
||||
@@ -20,6 +21,7 @@ interface SegmentsProps {
|
||||
name?: string;
|
||||
options: Option[];
|
||||
value?: Option['value'];
|
||||
defaultValue?: Option['value'];
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
disabled?: boolean;
|
||||
onChange?: (value: Option['value'] | undefined) => void;
|
||||
@@ -43,6 +45,11 @@ const Segments: Component<SegmentsProps> = (props) => {
|
||||
const [indicatorHeight, setIndicatorHeight] = createSignal(0);
|
||||
const [indicatorWidth, setIndicatorWidth] = createSignal(0);
|
||||
|
||||
onMount(() => {
|
||||
if (isNotNil(mProps.defaultValue)) {
|
||||
setSelected(mProps.defaultValue);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (isNotNil(originalValue()) && originalValue() !== selected()) {
|
||||
setSelected(originalValue());
|
||||
|
Reference in New Issue
Block a user