Debounce 不适用于文本字段 Reactjs

问题描述 投票:0回答:0

我正在尝试在我的动态文本字段组件中实现去抖动机制,但似乎我在它的实现中做错了什么。实际上,我只想从我的输入文本中删除尾随空格,所以我正在实施这个 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>
    )
})
reactjs material-ui user-input textfield debouncing
© www.soinside.com 2019 - 2024. All rights reserved.