如何解决在 TextField 上 onBlur() 时触发 props.onChange()
我正在构建一个组件 NumberField,该组件将在单击 (onFocus) 时删除 0,允许用户从空字段输入数字,并在焦点移出 (onBlur) 且该字段为空。
我想在 onBlur 被触发时从 props 调用 onChange 函数。
NAME CODE MATERIAL
andy a,b,d paper,plastic,wood
roger
danny c,d Metal,wood
cole e glass
我想“模拟”一个 onChange 事件调用的原因是因为我使用的是 Formik:
import * as React from 'react'
import {
TextField,TextFieldProps
} from '@material-ui/core'
const NumberField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
const [state,setState] = React.useState<string>(`${props.value}`)
React.useEffect(() => {
setState(`${props.value}`)
},[props.value])
function onChange(event: React.ChangeEvent<HTMLInputElement>) {
setState(event.target.value)
}
function onFocus() {
if (state === '0')
setState('')
}
function onBlur() {
if (state === '')
setState('0')
const value = parseFloat(state || '0')
if (value !== props.value) {
// call props.onChange
}
}
return (
<TextField
type="number"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
{...props}
/>
)
}
export default NumberField
formik.handleChange 的签名是:
<NumberField
fullWidth
name="unit"
label="Unit"
value={formik.values.unit}
onChange={formik.handleChange}
error={formik.touched.unit && Boolean(formik.errors.unit)}
helperText={formik.touched.unit && formik.errors.unit}
/>
我需要一个“假”的 React.ChangeEvent。有任何想法吗?我已经尝试了很多在 SO 上找到的东西(包括 useRef、dispatchEvent 和其他东西),但不工作而且很旧。也许事情已经改变了...
解决方法
这不是直接问题“如何模拟触发事件”的答案,而是在您使用 Material-UI 和 Formik 的情况下的替代解决方案。
import * as React from 'react'
import {
TextField,TextFieldProps
} from '@material-ui/core'
type NumberFieldProps = TextFieldProps & {
setValue: (value: number) => void
}
const NumberField: React.FC<NumberFieldProps> = (props: NumberFieldProps) => {
const [state,setState] = React.useState<string>(`${props.value}`)
const { value,...restProps } = props
React.useEffect(() => {
setState(`${props.value}`)
},[props.value])
function onChange(event: React.ChangeEvent<HTMLInputElement>) {
setState(event.target.value)
}
function onFocus() {
console.log('focus')
if (state === '0')
setState('')
}
function onBlur() {
console.log('blur')
if (state === '')
setState('0')
const value = parseFloat(state || '0')
if (value !== props.value) {
props.setValue(value)
}
}
return (
<TextField
type="number"
value={state}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
{...restProps}
/>
)
}
export default NumberField
const MaterialForm: React.FC<Props> = (props: Props) => {
const formik = useFormik({
...
})
return (
...
<Grid item style={{ width: '100%' }}>
<NumberField
fullWidth
name="factor"
label="Factor"
value={formik.values.factor}
setValue={(value) => formik.setFieldValue('factor',value)}
error={formik.touched.factor && Boolean(formik.errors.factor)}
helperText={formik.touched.factor && formik.errors.factor}
/>
...
)
}
export default MaterialForm
https://formik.org/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void
我仍然很想知道现在如何在 React 中模拟 onChange 事件!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。