键入 Redux Reactjs 时 TextField 失去焦点答案

【问题标题】：TextField lose focus when typing to Redux Reactjs键入 Redux Reactjs 时 TextField 失去焦点
【发布时间】：2020-05-24 13:16:14
【问题描述】：

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

我在 redux 中存储数据。

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 函数在输入时调用 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 的解决方案没有帮助，我取出了所有循环，但仍然无法正常工作

【问题讨论】：

您不应该传递onChangeSectionInfo 函数本身而不是在onChange={onChangeSectionInfo('fieldName')} 中调用它吗？
我在另一个定义了函数onChangeSectionInfo的组件中使用Expanded，这就是为什么我将它作为道具发送
但您不会将其作为道具发送。您发送onChangeSectionInfo('fieldName')，这是该函数返回的任何内容。
我不认为这是一个问题，因为它是在redux中更新一次值，然后失去焦点

标签： javascript reactjs redux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

每次你在输入中输入一个字符时，都会调用 onChange，它会更新 props，并且你的组件是由 props 组成的，所以 React 会重新渲染它，这会使字段失去焦点。如果可以，请尝试将事件处理程序更改为 onBlur 或其他内容。

当前事件链：

使用 props 渲染组件
组件呈现输入字段
您键入并触发 onChange
你的 onChange 被传递给父级并且 props 被更新
Props 用于再次渲染组件。

【讨论】：

【解决方案3】：

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

【讨论】：