Используя редукционную форму, я теряю фокус после ввода первого символа

Это происходит из-за того, что вы переопределяете renderField как новый компонент каждый раз при рендеринге, что означает, что он выглядит как новый компонент для React, поэтому он размонтирует исходный и повторно смонтирует новый. .

Вам нужно будет поднять его:

const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => (
      <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}>
        <label for={label} className="sr-only">{label}</label>
        <input {...input} placeholder={label} type={type} className="form-control" />
        <div class="text-danger">
          {touched ? error: ''}
        </div>
      </div>
    );

class SignIn extends Component {

  ...

  render() {
    const { message, handleSubmit, prestine, reset, submitting } = this.props;


    return (
      <div className="row">
        <div className="col-md-4 col-md-offset-4">
          <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} className="form-signin">
            <h2 className="form-signin-heading">
              Please sign in
            </h2>
            {this.renderAlert()}
            <Field name="email" type="text" component={renderField} label="Email Address" />
            <Field name="password" type="password" component={renderField} label="Password" />
            <button action="submit" className="btn btn-lg btn-primary btn-block">Sign In</button>
          </form>
        </div>
        </div>
    );
  }
}

...

Как упоминал @riscarrott, поместите renderField вне класса компонента.

Но я все еще теряю фокус. И после тестирования я пришел к выводу, что повторная визуализация выполняется из-за использования каррированной функции (возврат другой функции, а не возврата элемента . напрямую).

const const renderField = (InputComponent = 'input') => ({ input, label, type, meta: { touched, invalid, error } }) => (
      <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}>
        <label for={label} className="sr-only">{label}</label>
        <InputComponent {...input} placeholder={label} type={type} className="form-control" />
        <div class="text-danger">
          {touched ? error: ''}
        </div>
      </div>
    );

Затем, если ваша renderField является каррированной функцией:

тогда не делайте ????????????????:

     //.....

     <Field name="email" type="text" component={renderField('input')} label="Email Address" />
     <Field name="desc" component={renderField('textarea')} label="Email Address" />

Но сделайте следующее ???????????????? :

  // outside component class
  const InputField = renderField('input');
  const TextAreaField = renderField('textarea');

   // inside component class
  <Field name="email" type="text" component={InputField} label="Email Address" />
  <Field name="desc" component={TextAreaField} label="Email Address" />

Что сработало для меня, так это рефакторинг компонента на основе arrowFunction в компонент на основе класса, поскольку поведение компонентов InputForm было странным. Каждый раз, когда значение каждого ввода изменялось, все они перерисовывались даже после разделения каждого inputType на отдельные компоненты. Больше ничего не оставалось, как изменить основной компонент на классовый. Я предполагаю, что это может быть вызвано самой redux-form.

Это также может произойти, если вы определили стилизованные компоненты внутри функции рендеринга. Вы должны определить их вне своего класса. Нравится:

const Row = styled.div`
    justify-content:center;
`;
const Card = styled.div`
    width:18rem;
    padding:1rem;
 `;
 class Login extends Component{

У меня точно такая же проблема. я решил свой, изменив компонент на компонент класса, и я удалил всю конфигурацию стиля css из render().

У меня такая же проблема. Я решил это, когда добавил свою форму реакции на редукцию в хранилище в createForms():

export const ConfigureStore = () => {
  const store = createStore(
    combineReducers({

      tasks: Tasks,
      task: Task,
      image: Image,
      admin: Admin,
      pageId: PageID,
      fieldValues: FieldValues,
      formValues: FormValues,

      ...createForms({
        createTask: initialTask,
        editTask: initialEditTask
      })
    }),
    applyMiddleware(thunk, logger)
  );

  return store;
}

У меня была такая же проблема, и ни один из ответов не помог мне. Но благодаря ответу Advem я понял, что может быть не так: Моя форма требовала пользовательского интерфейса аккордеона, и для этого у меня была переменная состояния в ней:

const ConveyorNotificationSettingsForm = (props) => {
    const {handleSubmit, formValues, dirty, reset, submitting} = props;
    const [expandedSection, setExpandedSection] = useState(null);
...

только с одним расширенным разделом, индекс которого равен expandedSection .

После того, как я выделил аккордеон в отдельный функциональный компонент и переместил туда useState, проблема исчезла.

на самом деле, это проблема функционального компонента. Я использовал компонент на основе классов с избыточной формой, и моя проблема была решена. Я не знаю точную причину, но редукционная форма перерисовывается, когда мы вводим первое слово, и потери фокусируются. используйте компоненты на основе классов всякий раз, когда вы хотите использовать избыточную форму.

class StreamCreate extends React.Component{
rendorInput(formProps){
    return <input {...formProps.input} />; 
}

render(){
    return (
        <Container maxWidth="lg">
            <form action="">
                <Field name="title" component={this.rendorInput}/>
                <Field name="description" component={this.rendorInput} />
            </form>
        </Container>       
    )
}

}

export default reduxForm({
    form: 'createStream'
})( StreamCreate);