我正在尝试在我的动态文本字段组件中实现去抖动机制,但似乎我在它的实现中做错了什么。实际上,我只想从我的输入文本中删除尾随空格,所以我正在实施这个 deboucing 概念,这样一旦用户写下他的整个文本,几秒钟后我就会从他/她的文本中删除不需要的空格。
这是我的方法:
import { TextField } from "@mui/material"
import { observer } from "mobx-react"
import { debounce } from "lodash"
import { ITextFieldProps } from "./types"
export const TextFields = observer((props: ITextFieldProps) => {
return (
<TextField
label={props.item.label}
required
type={
props.item.validator === "int" ? "number" : props.item.validator
}
value={props.item.name}
onChange={(event) =>
debounce(
() =>
props.handleFormChange(props.index, event.target.value),
1000,
)
}
disabled={props.disabled}
/>
)
})
export const DynamicSection = observer((props: IProps) => {
const handleFormChange = (index: number, value: string) => {
console.log("insdie >>>>>> handleFormChange method >>", value)
let data = [...props.fields]
data[index].name = value.trim()
props.setInputFields(data)
props.setSaveButtonEnabled(true)
}
return (
<FormFieldSet header="">
<Stack spacing={2}>
{props.fields.map((input, index) => {
return (
<div key={index}>
{input.inputType === "textField" && (
<TextFields
data-testid="dynamic-textfields"
index={index}
item={input}
handleFormChange={handleFormChange}
disabled={props.disabled}
/>
)}
</div>
)
})}
</Stack>
</FormFieldSet>
)
})