reactjs - 试图选择一个 MenuItem，并让它显示在 Select，不显示，Material UI

Question

尝试在框中将第一个 MenuItem 作为默认选项的下拉菜单，直到您单击它，然后下拉菜单会出现并为您提供选择选项，例如 1、2、3，当您单击它时，选择出现，下拉菜单消失

class App extends Component<any, any> {
  constructor(props) {
    super(props);

    this.state = {
      rigName: '',
      desc: '',
      choice: '',
      customAttribute: ''
    }
  }

  handleSubmit = async (event: any) => {
    event.preventDefault();
    // const response = await 
    // this.props.onSubmit(response.data);
    console.log(this.state)
    // this.setState({rigName: ''})
  }

  handleChange(event) {
    this.setState({choice: event.target.value})
  }

  render() {
    return ( <FormControl variant="outlined" size="small" style={{ fontSize: 12 }}>
                      <InputLabel id="demo-customized-select-label">{this.state.choice}</InputLabel>
                      <Select
                        labelId="demo-customized-select-label"
                        id="demo-customized-select"
                        onChange={() => this.handleChange}
                        value={this.state.choice}
                      >
                        <MenuItem value="">
                          <em>None</em>
                        </MenuItem>
                        <MenuItem>ID</MenuItem>
                        <MenuItem>PSA</MenuItem>
                        <MenuItem>ExternalID</MenuItem>
                      </Select>
                    </FormControl>

    );
  }
}

export default App;

现在，下拉菜单有效，但是单击它后没有显示该选项，有什么想法吗？或者我错过了什么？

更新我已在 Select 内部更改为

onChange={this.handleChange.bind(this)}

现在我收到此错误 A component is changing a controlled SelectInput to be uncontrolled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled SelectInput element for the lifetime of the component.

标签： reactjstypescriptmaterial-ui