TextField теряет фокус при наборе текста в Redux Reactjs

Question

Я использую MaterialUI для создания компонента Expanded, где внутри у меня есть список текстовых полей.

Я храню данные в избыточном.

reduxState = {
    fieldName1:[
      {
          primaryText:"text1",
      },
      {
          primaryText:"text2"
      },
    ],
    fieldName2:[
      {
          primaryText:"text1"
      },
      {
          primaryText:"text2"
      },
    ]
}

Каждый Exapanded сохраняет textField каждого fieldNameN

компонента Exapanded выглядит следующим образом

function Expanded(props) {
  const {onChange, title, list } = props

  const CustomPaper = withStyles({
     root:{
       color: blue
     }
  })(Paper)

  return (
    <ExpansionPanel>
      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>{title}</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
          <Grid container spacing={1} direction="row">
            {list.map((item,i) => 
              <CustomPaper key={i}>
                <TextInput label="Main Text" value={item.primaryText} xs={12} onChange={(value) => onChange(value, i, 'primaryText')}/>
              </CustomPaper >
            )} 
          </Grid>           
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
}

Пример использования

            <Expanded
              title={`Add FieldName1`}
              list={reduxState.fieldName1}
              onChange={onChangeSectionInfo('fieldName')}
            />

функция onChangeSelectionInfo вызывает приставку updateSection при вводе

    [formActionTypes.UPDATE_SECTION]: (state, action) => {
      //ex. field-FieldName, value-"text1Updated", index=0, element="primaryText"
      const { field, value, index, element } = action.payload;
     return {
        ...state,
        [field]: state[field].map((object, i) =>
          i === index ? { ...object, [element]: value } : object
        )
      };
    },

Проблема в том, что я могу набрать только один символ, и тогда он не фокусирует TextField. Это проблема с redux, что обновление занимает слишком много времени?

РЕДАКТИРОВАТЬ: Решение от здесь не помогает, я вынул все циклы и все еще не работает

Answer 1

При каждом повторном рендеринге вы заново создаете CustomPaper, что потребует полного перемонтирования компонента (CustomPaper), а не только повторного рендеринга, поэтому вы теряете фокус.

Удалите компонент за пределами вашего компонента и никогда не определяйте компоненты внутри компонентов.

Answer 2

Таким образом, проблема была на самом деле в компоненте CustomPaper in Expanded, который я создал (я редактировал свой вопрос, прежде чем не показал, что использую CustomPaper, потому что он не показался мне важным). Когда я меняю CustomPaper на Paper с MaterialUI, все работает. Есть идеи почему?

Answer 3

Каждый раз, когда вы вводите символ на входе, вызывается onChange, который обновляет реквизиты, а ваш компонент состоит из реквизитов, поэтому React выполняет его повторную визуализацию, в результате чего поле теряет фокус. Попробуйте изменить обработчик событий на onBlur или что-то еще, если можете.

Текущая цепочка событий:

1. Используйте реквизиты для визуализации компонента
2. Компонент отображает поле ввода
3. Вы печатаете, и onChange срабатывает
4. Ваш onChange передается родительскому элементу, а реквизиты обновляются
5. Реквизит используется для повторной визуализации компонента.