Question

我正在尝试从状态中获取materialUI的自动完成组件的价值。

我面临以下问题：-

自动编译功能可以很好地选择值，并使用onChange函数将其保存为状态。但是，当我刷新页面/重新渲染时，它并没有在textfeild上显示值（从保存状态开始）：

<Autocomplete
    name={"TideLocation"}
    disabled={p.disabled}
    options={data_source}
    getOptionLabel={option => option.text}
    inputValue={this.state.tidelocation_searchtext}
    onChange={_this.handleUpdateTideLocationField}
    onNewRequest={_this.handleChangeTideLocation}
    onBlur={_this.handleBlurTideLocationField}
    onUpdateInput={_this.handleUpdateTideLocationField}
      renderInput={(params) => (
       <TextField className="autoCompleteTxt"{...params} label="Location" />
    )}
/>

我尝试了调试器，并在this.state.tidelocation_searchtext中发现了它的价值但无法使用参数进行设置。

提前谢谢！ Ps：我尝试使用defaultValue并搜索文本对我没有用

以下是我的ONchangeFunction

  handleUpdateTideLocationField = (str, value) => {
        debugger
        this.setState({tidelocation_searchtext: value.text});
    }

选择一个值后，以下值保存在状态中：

tidelocation_searchtext: "Auckland"

Answer 1

如果数据/状态未保存在外部，则在本地存储中，则将始终在页面刷新时丢失。这很正常-就像没有电源的RAM内存一样-它（页面/应用程序状态）仅存在于内存中！

这就像使用cookie来保持登录状态。

如果您确实需要这种功能，请使用f.e. redux-persist

Answer 2

所以我通过研究和几次尝试找到了自己解决的方法，以下是我的问题的解决方法：

<Autocomplete
  name={"TideLocation"}
  disabled={p.disabled}
  options={data_source.map(option=>option.text)} 
  defaultValue={this.state.tidelocation_searchtext}
  onChange={_this.handleUpdateTideLocationField}
  onNewRequest={_this.handleChangeTideLocation}
  onBlur={_this.handleBlurTideLocationField}
  onUpdateInput={_this.handleUpdateTideLocationField}
  renderInput={(params) => (
  <TextField className="autoCompleteTxt"{...params} label="Location" />
 )}
/>

基本上我在做以下错误：

1。无需使用输入inputValue={this.state.tidelocation_searchtext}和getOptionLabel={option => option.text}

2。因为我的数据是对象形式的，所以我必须将其转换为字符串，以便默认值可以与状态值匹配 options={data_source.map(option=>option.text)}

谢谢大家的宝贵支持和解决方案！

Answer 3

是的，如果传递了对象类型选项，则在挂载时material-ui的AutoComplete组件似乎不反映value。（也许是错误？）

我可以通过将适当的字符传递给inputValue来解决此问题。

@RebelCoder

也许您应该已经初始化tidelocation_searchtext。

材质UI自动完成组件未显示反应状态的值

3 个答案: