TextField在键入Redux Reactjs时失去焦点

Question

我正在使用MaterialUI构建组件扩展的，其中我有一个文本字段列表。

我在redux中存储数据。

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

每个Exapanded保留每个字段的文本字段

组件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函数调用redux操作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
        )
      };
    },

问题是我只能键入一个字符，然后它就会取消文本字段的焦点。是redux的问题吗，更新时间太长？

编辑：这里的解决方案没有帮助，我去掉了所有的循环，仍然不起作用




Answer 1

所以问题实际上是我创建的Expanded组件中的CustomFood（我编辑了我的问题，在我没有显示我正在使用CustomFood之前，因为它对我来说并不重要）。当我从MaterialUI更改CustomFood到Food时，一切都正常。有什么想法为什么？

Answer 2

每次在输入中键入字符时，都会调用onChange，它会更新道具，并且组件由道具组成，因此React会重新呈现它，这会使字段失去焦点。如果可以的话，尝试将事件处理程序更改为onBlur或其他东西。

当前事件链：

1. 使用道具渲染组件

Answer 3

在每次重新渲染时，您都要重新创建CustomPaper，这将需要完全重新安装组件（CustomPaper），而不仅仅是重新渲染，这就是您失去焦点的原因。

移除组件外部的组件，不要在组件内部定义组件。