使用 redux-form 库在 React 中输入字符后失去对输入字段的关注

Posted 2023-03-16

【中文标题】使用 redux-form 库在 React 中输入字符后失去对输入字段的关注

【英文标题】：Losing focus on input field after typing a character in React with redux-form library

【发布时间】：2021-09-29 15:17:52

【问题描述】：

我正在使用 redux-form 库在 React 中工作。我想在功能组件中创建具有 2 个字段的简单表单。在其中一个中仅输入 1 个字符后，我失去了注意力。我创建了返回 Material UI TextField 输入的函数 renderInput。使用本机 html 输入，我可以观察到相同的错误。我尝试将 renderInput 移动到组件内部，但没有帮助。

下面我展示了我的功能组件实现：

import React from "react";
import Field, InjectedFormProps, reduxForm from "redux-form";

import IStream from "./types/Istream";
import CommonFieldProps, GenericField, WrappedFieldProps from "redux-form/lib/Field";
import TextField from "@material-ui/core";
import  createStyles, makeStyles, Theme  from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) =>
    createStyles(
        root: 
            '& .MuiTextField-root': 
                margin: theme.spacing(1),
                width: '25ch',
            ,
        ,
    ),
);

export const streamMethods = () => 
    const renderInput = (formProps: WrappedFieldProps): JSX.Element => 
        return (
            <TextField
                required
                id="outlined-required"
                value=formProps.input.value
                onChange=formProps.input.onChange
            />
        );
    
    return 
        renderInput,
    


const StreamCreate = (props: InjectedFormProps<IStream>) => 
    const classes = useStyles();
    return (
        (
            <form className=classes.root>
                <Field name="title" component=streamMethods().renderInput/>
                <Field name="description" component=streamMethods().renderInput/>
            </form>
        )
    )


export default reduxForm<IStream, >(
    form: "streamCreate"   // name of using form
)(StreamCreate);

【参考方案1】：

一般来说，如果您在某个字段中失去焦点，则意味着该组件被重新安装。当组件的key 更改或它们的标识（组件的实际函数/类）发生更改时，组件将被重新安装（除其他外）。

对于来自streamMethods() 的每次渲染，您将返回一个具有新标识的组件函数（实际上，每次渲染两次）。

我尝试将renderInput 移动到内部组件，但没有帮助。

这有同样的问题；如果renderInput 是一个内部函数，它的身份也会在每次渲染时发生变化。 （如果您真的需要在另一个（功能性）组件中声明一个组件，您可以使用React.useMemo() 钩子让它保持其身份。）

改变现状

const StreamInput = (formProps: WrappedFieldProps): JSX.Element => 
  return (
    <TextField
      required
      id="outlined-required"
      value=formProps.input.value
      onChange=formProps.input.onChange
    />
  );
;
const StreamCreate = (props: InjectedFormProps<IStream>) => 
  const classes = useStyles();
  return (
    <form className=classes.root>
      <Field name="title" component=StreamInput />
      <Field name="description" component=StreamInput />
    </form>
  );
;

你应该是金色的。