【问题标题】:Material-UI Select doesn't update after onChange在 onChange 之后 Material-UI Select 不更新
【发布时间】:2021-03-24 11:43:59
【问题描述】:

我在整个网络上都看到过这个问题,但没有什么可以给我一个有效的解释。

我正在使用 Material-UI Select 和来自 React 的优秀的 setState(...)(虽然不是钩子)

我的组件基本上由这些行组成:

class MyComponent extends Component {

exportOptions = ['CSV','SDF']

  constructor(props) {
    super(props);
    this.state = {
[...]
      formatToExportTo : this.exportOptions[0]
    };

[...]

<Select value={this.state.formatToExportTo}
        style={{width : "10em"}}
        onChange={event=> {
            this.setState({formatToExportTo : event.target.value})
        }}>{
            this.exportOptions.map(f=><MenuItem key={f} value={f}>{f}</MenuItem>)
        }</Select>,

我的问题是我的 Select 组件在选择另一个选项后没有更新其值。

到目前为止我已经尝试过:

  • setState({...this.state, formatToExport : event.target.value}) 在 Select 的 onChange= 和 Select 标签中:value = {this.state.formatToExport}
  • setState({...this.state, formatToExport : event.target.value}) 在每个选项的 onClick= 和 Select 标签中:value = {this.state.formatToExport}。但这只是为了查看更新,因为 event.target.value 反正也不对
  • 以及我上面写的当前版本的行也是 onClick 或 onChange(没有应该由 setState 单独完成的状态克隆)。

就像在官方示例中一样,所以我真的看不出这种缺乏更新的原因。无论我尝试什么,Select 组件的当前显示值都不会改变是 display,即使状态已正确更新

感谢您花时间阅读我!

【问题讨论】:

    标签: javascript reactjs material-ui state


    【解决方案1】:

    总共搜索了 3 个小时后:

    通常value={this.state.formatToExportTo} 应该可以工作(我单独尝试过,没有其他应用程序围绕它) 但由于我用我的this 和更新顺序做了一些古怪的事情,我只需要替换:

    value={this.state.formatToExportTo}defaultValue={this.state.formatToExportTo}

    就是这样!我希望它对提出这个问题的人有所帮助

    【讨论】:

      猜你喜欢
      • 2020-09-24
      • 2018-02-18
      • 1970-01-01
      • 1970-01-01
      • 2021-12-01
      • 2019-02-25
      • 1970-01-01
      • 2017-01-02
      • 1970-01-01
      相关资源
      最近更新 更多