OnChange 用于存储所选下拉选项的值

Question

I have a Material UI dropdown menu. I will make a search later on the basis of the selected option from the drop down menu. How exactly could I use onChange() to store the option selected?

For now, I am trying to print the stored value (criteria) using typography at the end but instead of showing the selected value, I get a black page.

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>
    );
  }
}

How could I fix this?

Note: This is typescript

Added

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

Assuming the DropDownMenu component is just a Material-UI Select component ( https://material-ui.com/components/selects/#select ), you need to update the state of your searchItem to the value of the selected MenuItem.

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

Note, currently in your example the first name and last name item are using the same value of 1.

Update - added the comment that contained the solution's code:

Here's an example using Material-UI's Select component instead of DropDownMenu: https://codesandbox.io/s/eager-hugle-tlfri

Answer 2

DropDownMenu 菜单应具有接收选定选项作为参数的 'onChange' 事件，您可以将其存储在组件状态中

Answer 3

You could use the onChange event to do something when the user is selecting an option. If you want information, you could look at this article: https://www.w3schools.com/jsref/event_onchange.asp