键入 Redux Reactjs 时 TextField 失去焦点

Posted 2023-02-22

【中文标题】键入 Redux Reactjs 时 TextField 失去焦点

【英文标题】：TextField lose focus when typing to Redux Reactjs

【发布时间】：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中更新一次值，然后失去焦点

【参考方案1】：

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

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

【参考方案2】：

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

当前事件链：

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

【参考方案3】：

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