尧图网站建设 
Material UI 如何用 NumberField 组件实现带步进按钮的数字输入【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui在 Material UI 项目中需要让用户输入数字、并能通过按钮逐步加/减时会遇到一个事实Material UI 本身并不内置数字输入组件。官方文档页 Number Field 给出的方案是使用由 Base UI 的NumberField组合而成、并按 Material DesignMD2规范做样式处理的一组组件。因此前提是先安装 Base UIbase-ui/react。文档同时说明 Base UI 是 tree-shakeable 的最终打包产物只会包含你实际用到的组件。这篇文章的任务就一条把文档页提供的带步进按钮的数字输入组件复制进你的 React 应用跑起来并确认效果。文档提供两种视觉形态Outlined field步进按钮在输入框右端和Spinner field步进按钮在输入框两侧按你的视觉设计二选一即可。一、安装依赖在一个已有的 React 项目中操作。Material UI 的 安装文档 声明react和react-dom是 peer dependencies要求^17.0.0 || ^18.0.0 || ^19.0.0即这两个包应先就位。安装 Material UI 及其样式依赖以 npm 为例pnpm/yarn 同理替换npm install mui/material emotion/react emotion/styled安装 Base UI这一步是数字输入组件的必要前置文档原文“you must install Base UI before proceeding”npm install base-ui/react文档提供的组件代码里用到了 Material IconsKeyboardArrowUp、KeyboardArrowDown、Add、Remove、OpenInFull来自mui/icons-material你的项目也需要能引入这个包。二、复制 Outlined 版 NumberField 组件主路径文档页给出的官方使用方式是在 demo 工具栏点Expand code选择以./components/开头的文件把代码复制进项目。对应到本仓库这个组件文件是 components/NumberField.js同时提供 NumberField.tsx 供 TypeScript 项目使用。它的结构是BaseNumberField.Root用render渲染成 Material UI 的FormControlvariantoutlined内部依次是InputLabel、由BaseNumberField.Input渲染的OutlinedInput步进按钮放在endAdornment里以及FormHelperText提示文字。文档说明这套组件与 Material UI outlinedTextField使用同一组构建块组件FormControl、OutlinedInput、InputLabel、FormHelperText。组件代码文档示例来自仓库可直接复制到你的components/目录import * as React from react; import PropTypes from prop-types; import { NumberField as BaseNumberField } from base-ui/react/number-field; import IconButton from mui/material/IconButton; import FormControl from mui/material/FormControl; import FormHelperText from mui/material/FormHelperText; import OutlinedInput from mui/material/OutlinedInput; import InputAdornment from mui/material/InputAdornment; import InputLabel from mui/material/InputLabel; import KeyboardArrowUpIcon from mui/icons-material/KeyboardArrowUp; import KeyboardArrowDownIcon from mui/icons-material/KeyboardArrowDown; /** * This component is a placeholder for FormControl to correctly set the shrink label state on SSR. */ function SSRInitialFilled(_) { return null; } SSRInitialFilled.muiName Input; function NumberField({ id: idProp, label, error, size medium, ...other }) { let id React.useId(); if (idProp) { id idProp; } return ( BaseNumberField.Root {...other} render{(props, state) ( FormControl size{size} ref{props.ref} disabled{state.disabled} required{state.required} error{error} variantoutlined {props.children} /FormControl )} SSRInitialFilled {...other} / InputLabel htmlFor{id}{label}/InputLabel BaseNumberField.Input id{id} render{(props, state) ( OutlinedInput aria-describedby{${id}-helper-text} label{label} inputRef{props.ref} value{state.inputValue} onBlur{props.onBlur} onChange{props.onChange} onKeyUp{props.onKeyUp} onKeyDown{props.onKeyDown} onFocus{props.onFocus} slotProps{{ input: props, }} endAdornment{ InputAdornment positionend sx{{ flexDirection: column, maxHeight: unset, alignSelf: stretch, borderLeft: 1px solid, borderColor: divider, ml: 0, button: { py: 0, flex: 1, borderRadius: 0.5, }, }} BaseNumberField.Increment render{IconButton size{size} aria-labelIncrease /} KeyboardArrowUpIcon fontSize{size} sx{{ transform: translateY(2px) }} / /BaseNumberField.Increment BaseNumberField.Decrement render{IconButton size{size} aria-labelDecrease /} KeyboardArrowDownIcon fontSize{size} sx{{ transform: translateY(-2px) }} / /BaseNumberField.Decrement /InputAdornment } sx{{ pr: 0 }} / )} / FormHelperText id{${id}-helper-text} sx{{ ml: 0, :empty: { mt: 0 } }} Enter value between 10 and 40 /FormHelperText /BaseNumberField.Root ); } NumberField.propTypes { error: PropTypes.bool, /** * The id of the input element. */ id: PropTypes.string, label: PropTypes.node, size: PropTypes.oneOf([medium, small]), }; export default NumberField;两个需要注意的代码事实均来自上面的组件源码label、size、error、id之外的所有 props如min、max、defaultValue都通过{...other}透传给BaseNumberField.Root取值语义以 Base UI 的 API 为准。FormHelperText里的提示文案Enter value between 10 and 40是硬编码的如果你用的范围不是 10–40需要自行修改这行文案。组件里有一个名为SSRInitialFilled的空占位组件源码注释说明它的作用是让FormControl在 SSR 场景下正确设置 label 的 shrink 状态。如果你的应用有 SSR如 Next.js保留它纯客户端渲染的应用它也只是返回null。三、在页面中使用并确认效果组件放好后按文档 demo 的用法引用即可。下面是文档自带的 FieldDemo.js文档示例演示值min{10} max{40}等均为文档原值import 路径./components/NumberField是相对 demo 文件的位置——只要你在项目里保持“组件放在components子目录”的相对结构或相应调整这个 import 路径就能直接运行import * as React from react; import Box from mui/material/Box; import NumberField from ./components/NumberField; export default function FieldDemo() { return ( Box sx{{ display: grid, gap: 4 }} NumberField labelNumber Field min{10} max{40} / NumberField labelNumber Field (Small) sizesmall / NumberField labelNumber Field with Error min{10} max{40} defaultValue{100} sizesmall error / /Box ); }运行应用后确认三个判断点页面上渲染出 outlined 样式的输入框右端有一列上/下箭头按钮Increment/Decrement带aria-labelIncrease/aria-labelDecrease——这正是文档对 number field 的定义“an input with increment and decrement buttons for capturing numeric input from users”。点击箭头按钮输入值按步进加/减也可以在输入框里直接键入数字。文档示例中第三个字段同时传了min{10} max{40} defaultValue{100} error用于演示错误态输入框下方显示 helper text、组件进入 error 样式。各 props 的作用以组件源码中的propTypes为准label是标签文案PropTypes.nodesize取medium | small默认mediumdemo 中第二个字段用它演示了小尺寸error是布尔值控制错误样式id是输入元素的 id。其余 props 透传给 Base UI。四、可选分支Spinner 形态文档对两种形态的区分是Outlined field 的步进按钮作为 end adornment 放在输入框右端Spinner field 的步进按钮放在 outlined 输入框两侧文档认为这种布局 “ideal for touch devices and narrow ranges of values”适合触屏设备和取值范围较窄的场景。如果选择这个分支组件文件换成 components/NumberSpinner.js同样有 NumberSpinner.tsx用法见 SpinnerDemo.js文档示例import * as React from react; import Box from mui/material/Box; import NumberSpinner from ./components/NumberSpinner; export default function SpinnerDemo() { return ( Box sx{{ display: flex, flexDirection: column, gap: 4, justifyContent: center, }} NumberSpinner labelNumber Spinner min{10} max{40} / NumberSpinner labelNumber Spinner (Small) sizesmall / NumberSpinner labelSpinner with Error min{10} max{40} defaultValue{100} sizesmall error / /Box ); }Spinner 组件额外包含一个BaseNumberField.ScrubArea可拖动调节区域和FormLabelpropTypes中比 Outlined 版多声明了minPropTypes.number输入元素的最小值。五、边界与延伸阅读这套组件不是mui/material的内置导出而是文档页提供的、基于 Base UI 组合的示例实现所有 props 的完整参考指向 Base UI 的NumberFieldAPI reference官方文档页附有链接此处不重复给出外部地址。Outlined 版的构建块与 Material UI 的 outlinedTextField相同进一步了解各零件时可查阅 Text Field 组件文档的 Components 部分。仓库中所有 demo 均以.js/.tsx成对提供如FieldDemo.js/FieldDemo.tsxTypeScript 项目直接取.tsx版本即可两者行为一致。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material UI 如何用 NumberField 组件实现带步进按钮的数字输入？
Material UI 如何用 NumberField 组件实现带步进按钮的数字输入【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui在 Material UI 项目中需要让用户输入数字、并能通过按钮逐步加/减时会遇到一个事实Material UI 本身并不内置数字输入组件。官方文档页 Number Field 给出的方案是使用由 Base UI 的NumberField组合而成、并按 Material DesignMD2规范做样式处理的一组组件。因此前提是先安装 Base UIbase-ui/react。文档同时说明 Base UI 是 tree-shakeable 的最终打包产物只会包含你实际用到的组件。这篇文章的任务就一条把文档页提供的带步进按钮的数字输入组件复制进你的 React 应用跑起来并确认效果。文档提供两种视觉形态Outlined field步进按钮在输入框右端和Spinner field步进按钮在输入框两侧按你的视觉设计二选一即可。一、安装依赖在一个已有的 React 项目中操作。Material UI 的 安装文档 声明react和react-dom是 peer dependencies要求^17.0.0 || ^18.0.0 || ^19.0.0即这两个包应先就位。安装 Material UI 及其样式依赖以 npm 为例pnpm/yarn 同理替换npm install mui/material emotion/react emotion/styled安装 Base UI这一步是数字输入组件的必要前置文档原文“you must install Base UI before proceeding”npm install base-ui/react文档提供的组件代码里用到了 Material IconsKeyboardArrowUp、KeyboardArrowDown、Add、Remove、OpenInFull来自mui/icons-material你的项目也需要能引入这个包。二、复制 Outlined 版 NumberField 组件主路径文档页给出的官方使用方式是在 demo 工具栏点Expand code选择以./components/开头的文件把代码复制进项目。对应到本仓库这个组件文件是 components/NumberField.js同时提供 NumberField.tsx 供 TypeScript 项目使用。它的结构是BaseNumberField.Root用render渲染成 Material UI 的FormControlvariantoutlined内部依次是InputLabel、由BaseNumberField.Input渲染的OutlinedInput步进按钮放在endAdornment里以及FormHelperText提示文字。文档说明这套组件与 Material UI outlinedTextField使用同一组构建块组件FormControl、OutlinedInput、InputLabel、FormHelperText。组件代码文档示例来自仓库可直接复制到你的components/目录import * as React from react; import PropTypes from prop-types; import { NumberField as BaseNumberField } from base-ui/react/number-field; import IconButton from mui/material/IconButton; import FormControl from mui/material/FormControl; import FormHelperText from mui/material/FormHelperText; import OutlinedInput from mui/material/OutlinedInput; import InputAdornment from mui/material/InputAdornment; import InputLabel from mui/material/InputLabel; import KeyboardArrowUpIcon from mui/icons-material/KeyboardArrowUp; import KeyboardArrowDownIcon from mui/icons-material/KeyboardArrowDown; /** * This component is a placeholder for FormControl to correctly set the shrink label state on SSR. */ function SSRInitialFilled(_) { return null; } SSRInitialFilled.muiName Input; function NumberField({ id: idProp, label, error, size medium, ...other }) { let id React.useId(); if (idProp) { id idProp; } return ( BaseNumberField.Root {...other} render{(props, state) ( FormControl size{size} ref{props.ref} disabled{state.disabled} required{state.required} error{error} variantoutlined {props.children} /FormControl )} SSRInitialFilled {...other} / InputLabel htmlFor{id}{label}/InputLabel BaseNumberField.Input id{id} render{(props, state) ( OutlinedInput aria-describedby{${id}-helper-text} label{label} inputRef{props.ref} value{state.inputValue} onBlur{props.onBlur} onChange{props.onChange} onKeyUp{props.onKeyUp} onKeyDown{props.onKeyDown} onFocus{props.onFocus} slotProps{{ input: props, }} endAdornment{ InputAdornment positionend sx{{ flexDirection: column, maxHeight: unset, alignSelf: stretch, borderLeft: 1px solid, borderColor: divider, ml: 0, button: { py: 0, flex: 1, borderRadius: 0.5, }, }} BaseNumberField.Increment render{IconButton size{size} aria-labelIncrease /} KeyboardArrowUpIcon fontSize{size} sx{{ transform: translateY(2px) }} / /BaseNumberField.Increment BaseNumberField.Decrement render{IconButton size{size} aria-labelDecrease /} KeyboardArrowDownIcon fontSize{size} sx{{ transform: translateY(-2px) }} / /BaseNumberField.Decrement /InputAdornment } sx{{ pr: 0 }} / )} / FormHelperText id{${id}-helper-text} sx{{ ml: 0, :empty: { mt: 0 } }} Enter value between 10 and 40 /FormHelperText /BaseNumberField.Root ); } NumberField.propTypes { error: PropTypes.bool, /** * The id of the input element. */ id: PropTypes.string, label: PropTypes.node, size: PropTypes.oneOf([medium, small]), }; export default NumberField;两个需要注意的代码事实均来自上面的组件源码label、size、error、id之外的所有 props如min、max、defaultValue都通过{...other}透传给BaseNumberField.Root取值语义以 Base UI 的 API 为准。FormHelperText里的提示文案Enter value between 10 and 40是硬编码的如果你用的范围不是 10–40需要自行修改这行文案。组件里有一个名为SSRInitialFilled的空占位组件源码注释说明它的作用是让FormControl在 SSR 场景下正确设置 label 的 shrink 状态。如果你的应用有 SSR如 Next.js保留它纯客户端渲染的应用它也只是返回null。三、在页面中使用并确认效果组件放好后按文档 demo 的用法引用即可。下面是文档自带的 FieldDemo.js文档示例演示值min{10} max{40}等均为文档原值import 路径./components/NumberField是相对 demo 文件的位置——只要你在项目里保持“组件放在components子目录”的相对结构或相应调整这个 import 路径就能直接运行import * as React from react; import Box from mui/material/Box; import NumberField from ./components/NumberField; export default function FieldDemo() { return ( Box sx{{ display: grid, gap: 4 }} NumberField labelNumber Field min{10} max{40} / NumberField labelNumber Field (Small) sizesmall / NumberField labelNumber Field with Error min{10} max{40} defaultValue{100} sizesmall error / /Box ); }运行应用后确认三个判断点页面上渲染出 outlined 样式的输入框右端有一列上/下箭头按钮Increment/Decrement带aria-labelIncrease/aria-labelDecrease——这正是文档对 number field 的定义“an input with increment and decrement buttons for capturing numeric input from users”。点击箭头按钮输入值按步进加/减也可以在输入框里直接键入数字。文档示例中第三个字段同时传了min{10} max{40} defaultValue{100} error用于演示错误态输入框下方显示 helper text、组件进入 error 样式。各 props 的作用以组件源码中的propTypes为准label是标签文案PropTypes.nodesize取medium | small默认mediumdemo 中第二个字段用它演示了小尺寸error是布尔值控制错误样式id是输入元素的 id。其余 props 透传给 Base UI。四、可选分支Spinner 形态文档对两种形态的区分是Outlined field 的步进按钮作为 end adornment 放在输入框右端Spinner field 的步进按钮放在 outlined 输入框两侧文档认为这种布局 “ideal for touch devices and narrow ranges of values”适合触屏设备和取值范围较窄的场景。如果选择这个分支组件文件换成 components/NumberSpinner.js同样有 NumberSpinner.tsx用法见 SpinnerDemo.js文档示例import * as React from react; import Box from mui/material/Box; import NumberSpinner from ./components/NumberSpinner; export default function SpinnerDemo() { return ( Box sx{{ display: flex, flexDirection: column, gap: 4, justifyContent: center, }} NumberSpinner labelNumber Spinner min{10} max{40} / NumberSpinner labelNumber Spinner (Small) sizesmall / NumberSpinner labelSpinner with Error min{10} max{40} defaultValue{100} sizesmall error / /Box ); }Spinner 组件额外包含一个BaseNumberField.ScrubArea可拖动调节区域和FormLabelpropTypes中比 Outlined 版多声明了minPropTypes.number输入元素的最小值。五、边界与延伸阅读这套组件不是mui/material的内置导出而是文档页提供的、基于 Base UI 组合的示例实现所有 props 的完整参考指向 Base UI 的NumberFieldAPI reference官方文档页附有链接此处不重复给出外部地址。Outlined 版的构建块与 Material UI 的 outlinedTextField相同进一步了解各零件时可查阅 Text Field 组件文档的 Components 部分。仓库中所有 demo 均以.js/.tsx成对提供如FieldDemo.js/FieldDemo.tsxTypeScript 项目直接取.tsx版本即可两者行为一致。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考