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 Select 組件（ https://material-ui.com/components/selects/#select ），您需要將 searchItem 的狀態更新為所選 MenuItem 的值。

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

請注意，目前在您的示例中，名字和姓氏項使用相同的值 1。

更新- 添加了包含解決方案代碼的注釋：

這是使用 Material-UI 的 Select 組件而不是 DropDownMenu 的示例： https : //codesandbox.io/s/eager-hugle-tlfri

Answer 2

DropDownMenu 菜單應具有接收選定選項作為參數的 'onChange' 事件，您可以將其存儲在組件狀態中

Answer 3

您可以使用 onChange 事件在用戶選擇選項時執行某些操作。 如果你想要信息，你可以看看這篇文章： https : //www.w3schools.com/jsref/event_onchange.asp