Ant Design Radio 垂直 RadioGroup 实战结合动态输入框实现多选项扩展选择【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design导读在表单设计中当备选项较多且需要展示完整选项供用户比较时单选框Radio比下拉选择更直观。ant-design 的RadioGroup默认是水平排布而通过简单的样式控制即可实现垂直布局并可在某个选项被选中后动态渲染额外输入框用于其他 / More...之类的扩展场景。本文将基于 ant-design 仓库中 radiogroup-more 演示 完整讲解垂直 RadioGroup 的实现原理、受控/非受控切换机制以及如何结合 Input 组件实现条件渲染的扩展选项。一、场景定位什么时候需要垂直 RadioGroup根据 Radio 组件文档 的说明Radio 适用于在多个备选项中选中单个状态它与 Select 的区别在于Radio 的所有选项默认可见方便用户在比较中做选择因此选项不宜过多。当选项数量较多、文案较长或表单采用纵向排版时水平排布的选项会占用过多横向空间此时将 RadioGroup 改为垂直排布是最直接的解决方案。典型的应用场景包括设置面板中支付方式通知频率等纵向表单项问卷调查中逐行排列的选择题其他选项 自定义输入的组合式表单本文演示的核心场景。二、垂直 RadioGroup 的完整实现radiogroup-more.md演示了垂直的 RadioGroup配合更多输入框选项的用法。核心代码如下import { Radio, Input } from antd; const RadioGroup Radio.Group; const App React.createClass({ getInitialState() { return { value: 1, }; }, onChange(e) { console.log(radio checked, e.target.value); this.setState({ value: e.target.value, }); }, render() { const radioStyle { display: block, height: 30px, lineHeight: 30px, }; return ( RadioGroup onChange{this.onChange} value{this.state.value} Radio style{radioStyle} keya value{1}Option A/Radio Radio style{radioStyle} keyb value{2}Option B/Radio Radio style{radioStyle} keyc value{3}Option C/Radio Radio style{radioStyle} keyd value{4} More... {this.state.value 4 ? Input style{{ width: 100, marginLeft: 10 }} / : null} /Radio /RadioGroup ); } }); ReactDOM.render(App /, mountNode);2.1 垂直排布的实现要点垂直布局并不需要额外的组件 API而是通过radioStyle让每个 Radio 的label元素按块级元素排布display: block将选项从内联元素改为块级元素使每个选项独占一行height: 30px与lineHeight: 30px固定行高并垂直居中保证多选项之间视觉对齐、间距均匀。从样式源码看radio.less 中.ant-radio-group默认display: inline-block其内部的label默认带margin-right: 16px水平间距而单个.ant-radio是display: inline-block。因此若不额外设置样式RadioGroup 内的选项天然是水平排列的。通过内联样式覆盖display为block即可在不修改任何全局样式的前提下实现垂直布局——这也是该演示刻意使用style而非新增 CSS 类的原因。2.2 More... 动态输入框的条件渲染最后一个选项Option D的文案是More...其关键在于{this.state.value 4 ? Input style{{ width: 100, marginLeft: 10 }} / : null}当且仅当当前选中值为4即选中了 More... 选项时才在选项文本后方渲染一个宽度 100px、左侧留白 10px 的Input。marginLeft: 10用于与More...文本之间保持间距width: 100控制输入框尺寸避免撑开布局。这里体现了受控组件的数据流闭环RadioGroup的value绑定this.state.value初始为1用户点击某选项时onChange回调拿到e.target.value并setState组件重渲染时value 4判断生效输入框随之出现或消失。配合console.log(radio checked, e.target.value)可以在控制台实时观察选中值的变化便于调试。三、从源码理解 RadioGroup 的选中机制要深入理解该演示为什么能工作需要看 RadioGroup 的底层实现 group.jsx3.1 受控与默认值的优先级getInitialState中按以下优先级初始化选中值if (value in props) { value props.value; // 1. 受控显式传入 value } else if (defaultValue in props) { value props.defaultValue; // 2. 半受控默认值 } else { const checkedValue getCheckedValue(props.children); value checkedValue checkedValue.value; // 3. 纯非受控从子节点 checked 推导 }本文演示使用valueonChangesetState属于标准的受控模式。此外还提供defaultValue非受控模式见 size 演示 中的RadioGroup defaultValuea以及从子Radio的checked属性推导初值的模式。3.2 子选项的注入与互斥render方法中通过React.Children.map遍历子元素对每个Radio/RadioButton注入三个关键 propsreturn React.cloneElement(radio, { ...keyProps, ...radio.props, onChange: this.onRadioChange, // 统一接管点击事件 checked: this.state.value radio.props.value, // 依据 value 相等性判定选中 disabled: radio.props.disabled || this.props.disabled, // 组级禁用向下透传 });这正是一组互斥的 Radio的核心实现每个选项的选中态完全由this.state.value与自身value的相等性决定同一时刻只有一个选项的checked为true。因此演示中所有选项都必须提供互不相同的value1、2、3、4这与 RadioGroup 组合演示 中的写法一致。3.3 变化回调的传递onRadioChange在非受控场景下会先setState更新内部 value然后调用this.props.onChange(ev)向上抛出原生事件。事件对象e.target.value即被选中 Radio 的value演示中的onChange(e)正是读取该字段。3.4 复合组件结构从 index.jsx 可以看到Radio.Group与Radio.Button是通过挂载静态属性组合而成AntRadio.Button Button; AntRadio.Group Group;因此演示中的const RadioGroup Radio.Group;等价于Radio.Group。单个Radio组件本身封装自rc-radio负责渲染label包裹的原生 input 与圆点样式见 radio.jsx这也解释了为什么给Radio传入的style会作用到label上——正是它承载了display: block的垂直排布样式。四、API 速查与扩展场景结合 Radio 文档 的 API 表格本演示涉及的参数整理如下Radio 参数参数说明类型默认值checked指定当前是否选中BooleanfalsedefaultChecked初始是否选中Booleanfalsevalue根据 value 进行比较判断是否选中String无RadioGroup 参数参数说明类型可选值默认值onChange选项变化时的回调函数Function(e:Event)无无value用于设置当前选中的值受控String无无defaultValue默认选中的值非受控String无无size大小只对按钮样式生效Stringlargedefaultsmalldefault扩展场景一组级禁用若整组选项都需要禁用可直接在RadioGroup上设置disabled源码中disabled: radio.props.disabled || this.props.disabled会将其透传到每个选项见 radiobutton 演示 第三组示例。扩展场景二按钮样式组合如果希望垂直排布的是按钮样式Radio.Button同样可以用display: block的思路覆盖样式按钮样式的尺寸、圆角与选中态样式均由 radio.less 中的ant-radio-button规则提供size参数只对按钮样式生效。扩展场景三与表单校验集成More... 输入框出现在表单中时可配合 ant-design 的 Form 组件将输入值纳入校验本演示的value 4条件判断同样适用于校验规则的动态启停例如仅在选中 More... 时要求该输入框必填。五、小结垂直 RadioGroup 本身并不需要特殊 API核心技巧在于用display: block 固定行高覆盖默认的水平内联布局通过受控的valueonChange维护选中状态利用源码中checked: this.state.value radio.props.value的相等性比较实现互斥用this.state.value X的条件渲染在选中特定选项时动态插入Input实现选项 扩展输入的组合交互。文中涉及的源码与演示均可在仓库对应路径中查看组件实现、样式定义、组件文档 以及完整的 radiogroup-more 演示。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Radio 垂直 RadioGroup 实战：结合动态输入框实现多选项扩展选择
Ant Design Radio 垂直 RadioGroup 实战结合动态输入框实现多选项扩展选择【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design导读在表单设计中当备选项较多且需要展示完整选项供用户比较时单选框Radio比下拉选择更直观。ant-design 的RadioGroup默认是水平排布而通过简单的样式控制即可实现垂直布局并可在某个选项被选中后动态渲染额外输入框用于其他 / More...之类的扩展场景。本文将基于 ant-design 仓库中 radiogroup-more 演示 完整讲解垂直 RadioGroup 的实现原理、受控/非受控切换机制以及如何结合 Input 组件实现条件渲染的扩展选项。一、场景定位什么时候需要垂直 RadioGroup根据 Radio 组件文档 的说明Radio 适用于在多个备选项中选中单个状态它与 Select 的区别在于Radio 的所有选项默认可见方便用户在比较中做选择因此选项不宜过多。当选项数量较多、文案较长或表单采用纵向排版时水平排布的选项会占用过多横向空间此时将 RadioGroup 改为垂直排布是最直接的解决方案。典型的应用场景包括设置面板中支付方式通知频率等纵向表单项问卷调查中逐行排列的选择题其他选项 自定义输入的组合式表单本文演示的核心场景。二、垂直 RadioGroup 的完整实现radiogroup-more.md演示了垂直的 RadioGroup配合更多输入框选项的用法。核心代码如下import { Radio, Input } from antd; const RadioGroup Radio.Group; const App React.createClass({ getInitialState() { return { value: 1, }; }, onChange(e) { console.log(radio checked, e.target.value); this.setState({ value: e.target.value, }); }, render() { const radioStyle { display: block, height: 30px, lineHeight: 30px, }; return ( RadioGroup onChange{this.onChange} value{this.state.value} Radio style{radioStyle} keya value{1}Option A/Radio Radio style{radioStyle} keyb value{2}Option B/Radio Radio style{radioStyle} keyc value{3}Option C/Radio Radio style{radioStyle} keyd value{4} More... {this.state.value 4 ? Input style{{ width: 100, marginLeft: 10 }} / : null} /Radio /RadioGroup ); } }); ReactDOM.render(App /, mountNode);2.1 垂直排布的实现要点垂直布局并不需要额外的组件 API而是通过radioStyle让每个 Radio 的label元素按块级元素排布display: block将选项从内联元素改为块级元素使每个选项独占一行height: 30px与lineHeight: 30px固定行高并垂直居中保证多选项之间视觉对齐、间距均匀。从样式源码看radio.less 中.ant-radio-group默认display: inline-block其内部的label默认带margin-right: 16px水平间距而单个.ant-radio是display: inline-block。因此若不额外设置样式RadioGroup 内的选项天然是水平排列的。通过内联样式覆盖display为block即可在不修改任何全局样式的前提下实现垂直布局——这也是该演示刻意使用style而非新增 CSS 类的原因。2.2 More... 动态输入框的条件渲染最后一个选项Option D的文案是More...其关键在于{this.state.value 4 ? Input style{{ width: 100, marginLeft: 10 }} / : null}当且仅当当前选中值为4即选中了 More... 选项时才在选项文本后方渲染一个宽度 100px、左侧留白 10px 的Input。marginLeft: 10用于与More...文本之间保持间距width: 100控制输入框尺寸避免撑开布局。这里体现了受控组件的数据流闭环RadioGroup的value绑定this.state.value初始为1用户点击某选项时onChange回调拿到e.target.value并setState组件重渲染时value 4判断生效输入框随之出现或消失。配合console.log(radio checked, e.target.value)可以在控制台实时观察选中值的变化便于调试。三、从源码理解 RadioGroup 的选中机制要深入理解该演示为什么能工作需要看 RadioGroup 的底层实现 group.jsx3.1 受控与默认值的优先级getInitialState中按以下优先级初始化选中值if (value in props) { value props.value; // 1. 受控显式传入 value } else if (defaultValue in props) { value props.defaultValue; // 2. 半受控默认值 } else { const checkedValue getCheckedValue(props.children); value checkedValue checkedValue.value; // 3. 纯非受控从子节点 checked 推导 }本文演示使用valueonChangesetState属于标准的受控模式。此外还提供defaultValue非受控模式见 size 演示 中的RadioGroup defaultValuea以及从子Radio的checked属性推导初值的模式。3.2 子选项的注入与互斥render方法中通过React.Children.map遍历子元素对每个Radio/RadioButton注入三个关键 propsreturn React.cloneElement(radio, { ...keyProps, ...radio.props, onChange: this.onRadioChange, // 统一接管点击事件 checked: this.state.value radio.props.value, // 依据 value 相等性判定选中 disabled: radio.props.disabled || this.props.disabled, // 组级禁用向下透传 });这正是一组互斥的 Radio的核心实现每个选项的选中态完全由this.state.value与自身value的相等性决定同一时刻只有一个选项的checked为true。因此演示中所有选项都必须提供互不相同的value1、2、3、4这与 RadioGroup 组合演示 中的写法一致。3.3 变化回调的传递onRadioChange在非受控场景下会先setState更新内部 value然后调用this.props.onChange(ev)向上抛出原生事件。事件对象e.target.value即被选中 Radio 的value演示中的onChange(e)正是读取该字段。3.4 复合组件结构从 index.jsx 可以看到Radio.Group与Radio.Button是通过挂载静态属性组合而成AntRadio.Button Button; AntRadio.Group Group;因此演示中的const RadioGroup Radio.Group;等价于Radio.Group。单个Radio组件本身封装自rc-radio负责渲染label包裹的原生 input 与圆点样式见 radio.jsx这也解释了为什么给Radio传入的style会作用到label上——正是它承载了display: block的垂直排布样式。四、API 速查与扩展场景结合 Radio 文档 的 API 表格本演示涉及的参数整理如下Radio 参数参数说明类型默认值checked指定当前是否选中BooleanfalsedefaultChecked初始是否选中Booleanfalsevalue根据 value 进行比较判断是否选中String无RadioGroup 参数参数说明类型可选值默认值onChange选项变化时的回调函数Function(e:Event)无无value用于设置当前选中的值受控String无无defaultValue默认选中的值非受控String无无size大小只对按钮样式生效Stringlargedefaultsmalldefault扩展场景一组级禁用若整组选项都需要禁用可直接在RadioGroup上设置disabled源码中disabled: radio.props.disabled || this.props.disabled会将其透传到每个选项见 radiobutton 演示 第三组示例。扩展场景二按钮样式组合如果希望垂直排布的是按钮样式Radio.Button同样可以用display: block的思路覆盖样式按钮样式的尺寸、圆角与选中态样式均由 radio.less 中的ant-radio-button规则提供size参数只对按钮样式生效。扩展场景三与表单校验集成More... 输入框出现在表单中时可配合 ant-design 的 Form 组件将输入值纳入校验本演示的value 4条件判断同样适用于校验规则的动态启停例如仅在选中 More... 时要求该输入框必填。五、小结垂直 RadioGroup 本身并不需要特殊 API核心技巧在于用display: block 固定行高覆盖默认的水平内联布局通过受控的valueonChange维护选中状态利用源码中checked: this.state.value radio.props.value的相等性比较实现互斥用this.state.value X的条件渲染在选中特定选项时动态插入Input实现选项 扩展输入的组合交互。文中涉及的源码与演示均可在仓库对应路径中查看组件实现、样式定义、组件文档 以及完整的 radiogroup-more 演示。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考