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

Question

我正在使用 redux-form 库进行 React 工作。我想在功能组件中创建包含 2 个字段的简单表单。在其中一个中仅输入 1 个字符后，我失去了注意力。我创建了 renderInput 函数，其中 return Material UI TextField 输入。使用本机 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);

Answer 1

一般来说，如果您在某个字段中失去焦点，则意味着该组件被重新挂载了。当 key 更改或当它们的身份（组件的实际 function/class ）更改时，组件会重新安装（除其他外）。

您正在为 streamMethods() 中的每个渲染返回一个具有新标识的组件函数（实际上，每个渲染两次）。

I tried to move renderInput to component inside but it haven't helped me.

有同样的问题；如果 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>
  );
};

你应该是金色的。

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

Losing focus on input field after typing a character in React with redux-form library

reactjs

react-redux

react-functional-component