javascript - 在 Redux Reactjs 中输入内容时 TextField 失去焦点

Question

我正在使用 MaterialUI 构建组件 Expanded，其中有文本字段列表。

我将数据存储在 redux 中。

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

每个扩展都保留每个fieldNameN的textField

组件扩展看起来像这样

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
        )
      };
    },

问题是我只能输入一个字符，然后它就会取消 TextField 的焦点。是不是redux的问题，更新时间太长？

编辑:来自here的解决方案没有帮助，我把所有的循环都拿出来了，但仍然不起作用

Answer 1

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

从组件外部删除组件，并且永远不要在组件内部定义组件。