在抽屉中调用setState（）onChange时选择文本字段的错误

Question

我有一个Material-UI抽屉，在其中，我有一个TextField选择输入。 我可以打开下拉菜单，但是当我单击任何选项时，它将删除整个页面的内容并在控制台上产生许多错误。

我正在学习React，所以它可能是基本的东西。

我进行了一些测试，发现它只有在以下情况下才会损坏：

1. 我在setState()属性调用的函数中调用onChange。
2. TextField选择位于Drawer组件内部。

我的代码：

import React, { Component } from 'react';

import './styles.scss';

import Drawer from '@material-ui/core/Drawer';

import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

class Filter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter_open: true,
      form: {
        city: ''
      },
      cities: [
        {
          id: 1,
          label: 'Lorem'
        },
        {
          id: 2,
          label: 'Ipsum'
        }
      ]
    }
  }

  handleCityChange = (changeEvent) => {
    this.setState({
      form: {
        city: changeEvent.target.value
      }
    });
  }

  render() {
    return (
      <Drawer
        anchor="bottom"
        open={this.state.filter_open}
        transitionDuration={450}
      >
        <div className="Filter">
          <TextField
            id="filled-select-city"
            className="TextField"
            select
            label="Select an option"
            value={this.state.form.city}
            onChange={this.handleCityChange}
            margin="normal"
          >
            {this.state.cities.map(option => (
              <MenuItem key={option.id} value={option.id}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>
        </div>
      </Drawer>
    )
  }
}

export default Filter

控制台上的错误：

Answer 1

我唯一看到的是您尚未将事件传递给this.handleCityChange方法。

尝试将事件传递给这样的方法：

onChange={(e) => {this.handleCityChange(e);}}