javascript 相关问题

我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。我正在接受卡号用户的输入，并希望用户输入的长度不得小于和大于12。这是我的文本字段的声明。 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" maxLength={12} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 现在我不明白是否使用javascript或任何事件处理程序来限制长度。您可以设置 maxLength 属性来限制文本框中的文本。您可以将 onChange 传递给 maxLength inputProps 的 material-ui（小写 i，而不是 InputProps）属性，而不是 TextField 方法。 <TextField required id="required" label="Required" defaultValue="Hello World" inputProps={{ maxLength: 12 }} /> 基本上我们可以通过 inputProps 对象编辑所有输入元素的本机属性。链接到TextField Api 我找到了另一个解决方案这里。 <TextField required id="required" label="Required" defaultValue="Hello World" onInput = {(e) =>{ e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12) }}/> <TextField autoFocus={true} name="name" onChange={handleChange} placeholder="placeholder" id="filled-basic" variant="filled" size="small" fullWidth inputProps={{ maxLength: 25, }} InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} /> <TextField id="username" name="username" label={translate('username')} onChange={handleChange} onBlur={handleBlur} value={values.username} error={Boolean(errors.username) && touched.username} helperText={(errors.username && touched.username && translate(errors.username))} required inputProps={{maxLength :20}} /> 值得注意的是，Material-ui <TextField /> 组件没有 maxlength 属性。然而，原始的 html <input> 确实如此。因此，您实际上不需要创建任何额外的函数来使其正常工作。只需使用基本 <input> 属性即可使用 inputProps。实际答案是这样的： inputProps={ {maxLength: 22} } // Result => <input maxlength="yourvalue" /> 它的作用是设置底层 maxlength 的 <input> 属性，结果是：<input maxlength="yourvalue" />。这里要注意的另一个重要事项是您使用 inputProps 而不是 InputProps。您的目标是小写字母 inputProps。如果您使用的是 MUI 5 版本 5.0.6，由于对旧版本的支持，您将必须执行以下操作， <TextField id="standard-textarea" label="A label" placeholder="Some text here" multiline variant="standard" defaultValue={"Hello"} inputProps={{ maxLength: 255, }} InputProps={{ disableUnderline: true, }} /> TextField同时支持inputProps和InputProps，但有些属性反之则不起作用。 maxLength 在 InputProps 中无法按预期工作，并且 MUI 5 的 disableUnderline 等属性在 inputProps 中无法按预期工作。小心可能的 typo 与 i。请参阅 API 了解更多信息，https://mui.com/api/text-field/。我发现 Material UI 中 TextField 和 Input 之间的行为有些奇怪它们彼此非常相似，我看到的问题如下：在 TextField 组件上，如果您使用大写 "I" 的 InputProps，则会显示装饰，但另一方面，如果您将其用作小写“inputProps”，则 maxLength Html 属性将被视为 valid ，但不是 adorments 我最终使用 INPUT 而不是 TextField，所以你可以在中使用 adorments <TextField variant="outlined" required fullWidth error={errors.email} id="email" label={t("signup-page.label-email")} name="email" onChange={handleChange} inputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton aria-label="toggle password visibility"> <EmailIcon /> </IconButton> </InputAdornment> ), maxLength: 120, }} /> 在上面的代码中，adorment被忽略，但是maxLength被用作“inputProps”驼峰式大小写下面的代码是一个工作示例，正如您所看到的，我将其视为旧样式中的 Form Control、输入标签和输入“outlinedInput” <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="firstName">Password</InputLabel> <OutlinedInput value={values.firstName} autoComplete="outlined" name="firstName" variant="outlined" required fullWidth error={errors.firstName} id="firstName" label={t("signup-page.label-firstname")} onChange={handleChange} autoFocus inputProps={{ maxLength: 32 }} /> </FormControl> 解决方案。我的最后建议，使用 OutlinedInput 而不是 TextField，这样你就可以分开放置 Adorments 和 maxLength 下面是一个带有 FormControl OutlinedInput、inputProps - maxLength 和结束 Adorment 图标的工作示例 <FormControl variant="outlined" fullWidth> <InputLabel htmlFor="password">Password</InputLabel> <OutlinedInput value={values.passwordConfirm} variant="outlined" required fullWidth error={errors.passwordConfirm} name="passwordConfirm" label={t("signup-page.label-password-confirm")} type={values.showPasswordConfirm ? "text" : "password"} id="password-confirm" onChange={handleChange} inputProps= {{maxLength:32}} endAdornment= { <InputAdornment position="end"> <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword("passwordConfirm")} onMouseDown={handleMouseDownPassword} > {values.showPasswordConfirm ? ( <Visibility /> ) : ( <VisibilityOff /> )} </IconButton> </InputAdornment> } /> {errors.passwordConfirm && ( <p className="error"> {errors.passwordConfirm} </p> )} </FormControl> 接受的答案在 Firefox 中不适用于大数字（大于 16 位数字）。数字的行为方式很奇怪。对于 22 长度的字段，我们最终使用了这个： <TextField required validateOnBlur field="cbu" label="22 dígitos del CBU" validate={validate.required} type="text" inputProps={ {maxLength: 22} } onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }} /> 基本上，文本字段的原生 maxLength 约束，加上“即时”从字符串到数字的转换。改进此外，您可能更喜欢使其可重用且更具语义。 # constraints.js const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }; # form.js <TextField field="cbu" label="22 dígitos del CBU" inputProps={ {maxLength: 22} } onInput={(e) => onlyNumbers(e) } 材料设计 <TextField /> 组件没有任何 length 属性。您可以使用 onChange() 方法创建您的。 updateTextField(event,value){ if(value.length <= 12){ //Update your state } else{ //Value length is biggest than 12 } } <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" onChange={(e,v) => this.updateTextField(e,v)} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 在您的更改处理程序中，只需编写即可。 if (event.target.value.length !== maxLength ) return false; 我也遇到了类似的问题，但使用的是 TextareaAutosize。不幸的是， inputProps={{ maxLength: 12 }} 不适用于 TextareaAutosize。以下解决方法适用于 TextareaAutosize 以及文本和数字。受到此问题已接受答案的启发 - https://stackoverflow.com/a/49130234/5236534 onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) import * as React from 'react'; import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function MinHeightTextarea() { return ( <TextareaAutosize aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" style={{ width: 200 }} onInput = {(e) =>{ e.target.value = (e.target.value).toString().slice(0,10) }} /> ); } 演示链接：限制 MUI TextareaAutosize 中的字符长度 <TextField id="SigninTextfield" label="Aadhaar number" id="Aadhar" lineDirection="center" required={true} type="number" inputProps={{ maxLength: 20, }} style={styles.rootstyle} erorText="Please enter only 12 digits number" /> 我们可以通过以下方式使用 inputProps 属性进行设置 import React from 'react' import { Autocomplete, TextField } from '@mui/material' export default function Select({ onChangeInput, label, name, value, options, placeholder, disabled, error, helpertext, required, shrink, maxLength }) { const _onChange = (e, v) => { onChangeInput(v) } return ( <Autocomplete freeSolo fullWidth={true} multiple={false} margin={'noraml'} readOnly={disabled} name={name} isOptionEqualToValue={(option, value) => option.label === value.label} value={value} options={options} placeholder={placeholder} renderInput={params => ( <TextField {...params} label={label} error={error} required={required} helperText={helpertext} variant={'standard'} inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99}} InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }} /> )} onInputChange={_onChange} /> ) } 对于仍在寻找数字字段解决方案的人来说，这个解决方案对我来说效果很好。 onInput={(e: any) => { e.target.value = Math.max(0, parseInt(e.target.value)) .toString() .slice(0, 2); }} 确保使用任意一个。 import * as React from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; export default function BasicTextFields() { const [num, setNum] = React.useState(); const limitChar = 12; const handleChange = (e) => { if (e.target.value.toString().length <= limitChar) { setNum(e.target.value); } }; return ( <Box component="form"> <TextField type="number" id="outlined-basic" label="Outlined" variant="outlined" onChange={(e) => handleChange(e)} defaultValue={num} value={num} /> </Box> ); } 其中很多答案现在已被弃用。推进 MUI 的新方法是使用 slotProps： return ( <TextField id={id} name={id} label={label} value={value} onChange={onChange} onBlur={onBlur} size={size} error={!!error} slotProps={{ htmlInput: { maxLength: 50 } }} {...props} /> );

javascript reactjs event-handling react-router

回答 16 投票 0

如何为使用 useQuery 获取的数据设置初始状态？

我正在使用 React 和 Apollo，我正在尝试使用 useQuery 钩子获取的数据来初始化状态，但在加载页面时出现“无法读取未定义的属性‘map’”......

javascript reactjs apollo

回答 1 投票 0

为什么response.data是html字符串而不是json对象？ Node.js、express.js、react

我的应用程序在本地主机上运行得很好，但是当我部署到 Heroku 时，我遇到了这个错误：当我在客户端 console.log(response.data) 时，我收到这个字符串而不是 res.json ...

javascript node.js reactjs express

回答 0 投票 0

动态模板 - 报告

所以，我正在构建一个类似 ERP 的自定义应用程序，是时候构建公司所需的报告了。在技术方面，我从事 Node.Js、Angular、MySQL 堆栈的工作。需求非常直接...

javascript mysql node.js angular templates

回答 1 投票 0

反应分页查询

我正在为 React 项目构建分页。当我单击上一页或下一页按钮时，分页本身确实可以工作，但我有两个问题，我无法弄清楚。浏览器按钮的行为很奇怪......

javascript reactjs react-router pagination browser-history

回答 1 投票 0

Visual Studio Code 在启动时崩溃（代码：-1073741818）

昨天，Visual Studio Code (1.67.1) 决定无法启动（立即崩溃）并吐出错误代码 -1073741818。我可以选择重新打开或关闭，但没有任何反应

javascript visual-studio-code snap

回答 3 投票 0

PDF.js 按固定宽度缩放 PDF

我有一个固定框，我想在其中显示由 PDF.js 渲染的 PDF。由于 PDF.js 文档无法真正访问（通过它们的源文件），我想知道它是否可能......

javascript pdf firefox pdf.js

回答 4 投票 0

用户登录后如何摆脱 Chrome 默认页面

我正在使用 Next.js router.replace 一旦用户进入主页。它工作得很好，但问题是后退按钮仍然处于启用状态。如果我点击后退按钮，它就会转到 Chrome 的默认...

javascript reactjs typescript next.js next.js13

回答 1 投票 0

如何在antd表单中使用Switch输入法？

我正在使用 Antd "version": "4.16.6"，并且我们的其中一种表单中有 Switch 字段：我正在使用 Antd "version": "4.16.6",，我们的其中一种表单中有 Switch 字段： <Form ref={registerForm} initialValues={{ hasArchive: true }}> <Form.Item name="hasArchive" label="Has Archive?" valuePropName="checked"> <Switch defaultChecked /> </Form.Item> </Form> 但是 Switch 不会改变 hasArchive 值。这两个组件对我有用。 import React, { useState } from "react"; import { Form, Switch } from 'antd'; const Example1 = () => { const [isChecked, setIsChecked] = useState(false); const onFinish = (value) => { console.log(value) } return <Form name='example-form' onFinish={onFinish} initialValues={{ isChecked }} > <Form.Item name='isChecked' valuePropName='checked' > <Switch onChange={setIsChecked} /> </Form.Item> </Form>; }; const Example2 = () => { const onFinish = (value) => { console.log(value) } return <Form name='example-form' onFinish={onFinish} initialValues={{ isChecked: true }} > <Form.Item name='isChecked' valuePropName='checked' > <Switch /> </Form.Item> </Form>; }; 使用 onChange 属性来监听开关切换。 import { Switch } from 'antd'; function handleSwitchToggle(checked) { console.log(`switch to ${checked}`); } ReactDOM.render(<Switch defaultChecked onChange={handleSwitchToggle} />, mountNode); 参考：https://ant.design/components/switch/ 要更新表单值，请使用以下代码，只需将 initialValue 属性放入 Form.item <Form.Item name="switch" label="Switch" valuePropName="checked" initialValue > <Switch checkedChildren="YES" unCheckedChildren="NO" /> </Form.Item> 您可以使用 antd switch 示例测试此 Playground 中的代码 https://codesandbox.io/s/xiao-yan-qi-ta-zu-jian-antd-4-17-0-alpha-7-forked- 00zvbr？文件=/index.js:518-691 <Form.Item name="hasArchive" label="Has Archive?" valuePropName={ hasArchive ? 'checked' : 'unchecked' }> <Switch /> // remove defaultChecked </Form.Item>

javascript reactjs antd

回答 3 投票 0

highcharts 树形图平移和放大和缩小

我正在使用 Highcharts 树形图表。我设法在一些帮助下启用滚动条。我正在尝试做但一直失败的另一件事是能够像在谷歌地图上一样在图表上移动......

javascript html jquery css highcharts

回答 1 投票 0

如何从content-disposition中获取文件名

我下载了一个文件作为ajax的响应。如何从内容处置中获取文件名和文件类型并显示其缩略图。我得到了很多搜索结果，但找不到正确的方法。 $(".

javascript ajax filenames file-type content-disposition

回答 11 投票 0

对多个 Div 应用倾斜 3D 悬停效果

我有这个 JavaScript“3D 倾斜”悬停效果： https://jsfiddle.net/qdc4v1jg/ 该代码在应用于一个 div 时工作正常，但是当它应用于多个 div 时，它就不起作用了......