OnChange для сохранения значения выбранного раскрывающегося меню

Question

У меня есть раскрывающееся меню Material UI. Я сделаю поиск позже на основе выбранной опции из выпадающего меню. Как именно я могу использовать onChange() для сохранения выбранной опции?

На данный момент я пытаюсь напечатать сохраненное значение (критерии), используя типографику в конце, но вместо отображения выбранного значения я получаю черную страницу.

export default class userSearchPage extends Component<{}, { searchItem: string, criteria: string }>{

  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: '',
      criteria: '',
    };
    this.handleDropDownChange = this.handleDropDownChange.bind(this);
  }

  handleDropDownChange(selected: any) {
    this.setState({
        criteria: selected
    });
  }

  render() {
    return (
      <div>
        <PermanentDrawerLeft></PermanentDrawerLeft>
        <div className='main-content'>
          <MuiThemeProvider>
            <DropDownMenu onChange = {this.handleDropDownChange}>
              <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
              <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
              <MenuItem value={2} style={{ fontSize: "20px" }} primaryText="Last Name" />
              <MenuItem value={3} style={{ fontSize: "20px" }} primaryText="Phone Number" />
              <MenuItem value={4} style={{ fontSize: "20px" }} primaryText="Email" />
            </DropDownMenu>
          </MuiThemeProvider>
          <Typography>{this.state.criteria}</Typography>
          <br></br><br></br>
          <SearchBar
            onChange={e => this.setState({ searchItem: e })}
            value = {this.state.searchItem}
            onRequestSearch={() => console.log('onRequestSearch')}
            style={{
              margin: '0 auto',
              maxWidth: 800
            }}
          />
           <Typography>{this.state.criteria}</Typography>
        </div>
      </div>
    );
  }
}

Как можно Я это исправлю?

Примечание. Это машинопись

Добавлено

export default class userSearchPage extends Component<{}, { searchItem: string, criteria: any}>{

  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: '',
      criteria: null, 
    };
    this.handleDropDownChange = this.handleDropDownChange.bind(this);
  }


  handleDropDownChange(event: any) {
    console.log(event.target.value);
    this.setState({
      criteria: event.target.value
    });
  }

  render() {
    return (
      <div>
        <PermanentDrawerLeft></PermanentDrawerLeft>
        <div className='main-content'>
        <InputLabel id="demo-simple-select-label">Search By</InputLabel>
          <Select
            value={this.state.criteria}
            onChange={this.handleDropDownChange}
            displayEmpty
          >
            <MenuItem disabled value="  ">
              <em>Search By</em>
            </MenuItem>
            <MenuItem value={1}>First Name</MenuItem>
            <MenuItem value={2}>Last Name</MenuItem>
            <MenuItem value={3}>Phone Number</MenuItem>
            <MenuItem value={4}>Email</MenuItem>
          </Select>
        </div>
      </div>
    );
  }
}

Answer 1

Предполагая, что компонент DropDownMenu является просто компонентом выбора Material-UI (https://material-ui.com/components/selects/#select), вам нужно обновить состояние вашего searchItem до значения выбранного MenuItem.

<DropDownMenu onChange={event => {this.setState({searchItem: event.target.value})}>

Обратите внимание, в настоящее время в вашем примере имя и фамилия используют одно и то же значение 1.

Обновление - добавлен комментарий, содержащий код решения:

Вот пример использования компонента Select Material-UI вместо DropDownMenu: https://codesandbox.io/s/eager-hugle-tlfri

Answer 2

Вы можете использовать событие onChange, чтобы что-то делать, когда пользователь выбирает опцию. Если вам нужна информация, вы можете посмотреть эту статью: https://www.w3schools.com/jsref/event_onchange.asp

Answer 3

В меню DropDownMenu должно быть событие 'onChange', которое получает выбранную опцию в качестве аргумента, которую вы можете сохранить в состоянии компонентов