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

【问题标题】：Losing focus on input field after typing a character in React with redux-form library使用 redux-form 库在 React 中输入字符后失去对输入字段的关注
【发布时间】：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);

【问题讨论】：

标签： reactjs react-redux react-functional-component

【解决方案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>
  );
};

你应该是金色的。

【讨论】：