Question

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

我将数据存储在redux中。

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

每个Exapanded保留每个textField的{{1}}

组件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')}
            />

函数调用redux操作onChangeSelectionInfo

updateSection

问题是我只能键入一个char，然后使TextField失去焦点。是redux的问题，更新时间太长了吗？

编辑：here的解决方案没有帮助，我淘汰了所有循环，但仍然无法正常工作

Answer 1

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

将组件移出组件之外，切勿在组件内部定义组件。

Answer 2

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

当前事件链：

使用道具渲染组件
组件呈现输入字段
您键入并触发onChange
您的onChange会传递给父级，道具会更新
道具用于再次渲染组件。

Answer 3

因此问题实际上出在我创建的> copied_sorted_long <- dput(sorted_long.SUB_dfCSKE_tot[193:224,]) structure(list(County = c("Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa", "Garissa"), `Period of measurement Kenya` = c("2011-01", "2011-04", "2011-07", "2011-10", "2012-01", "2012-04", "2012-07", "2012-10", "2013-01", "2013-04", "2013-07", "2013-10", "2014-01", "2014-04", "2014-07", "2014-10", "2015-01", "2015-04", "2015-07", "2015-10", "2016-02", "2016-06", "2016-10", "2017-02", "2017-06", "2017-10", "2018-02", "2018-06", "2018-10", "2018-12", "2019-02", "2019-06"), `IPC class` = c(2, 2, 3, 3, 2, 2, 3, 3, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 2, 3, 3, 2, 3, 1, 1, 2, 2, 2 ), Forecast = c(3, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 2, 3, 1, 1, 2, 2)), row.names = c(7L, 54L, 101L, 148L, 195L, 242L, 289L, 336L, 383L, 430L, 477L, 524L, 571L, 618L, 665L, 712L, 759L, 806L, 853L, 900L, 947L, 994L, 1041L, 1088L, 1135L, 1182L, 1229L, 1276L, 1323L, 1370L, 1417L, 1464L ), class = "data.frame")组件中的CustomPaper（我编辑了问题，在没有证明我正在使用Expanded之前，因为它似乎对我）。当我从MaterialUI将CustomPaper更改为CustomPaper时，一切正常。有什么想法吗？

键入Redux Reactjs时TextField失去焦点

3 个答案: