Как получить выпадающее выбранное значение из компонента NavBar в другие компоненты в React Использование пользовательского интерфейса материала для стилей - PullRequest
Новая
       13

Как получить выпадающее выбранное значение из компонента NavBar в другие компоненты в React Использование пользовательского интерфейса материала для стилей

0 голосов
/ 23 апреля 2020

У меня есть компонент AppBar, как показано ниже.

Из другого компонента я просто хочу получить доступ к выбранному раскрывающемуся значению и на основе выбранного значения раскрывающегося списка я проверю, какой раскрывающийся список я должен отобразить (т. Е. В этом AppBar, если я выберу США, то в другом компоненте (то есть местах) я покажу выпадающий список, в котором есть места в США, или если я выберу Европу, то в местах компонента я покажу места Европы в раскрывающемся списке). Так что для этого мне нужно получить доступ к области, которая находится в компоненте AppBar. Но когда я пытаюсь сделать это, AppBar отображает весь NavBar.

Может кто-нибудь сказать мне, как получить доступ к области в AppBar из других компонентов ? 

class Appbar extends React.Component<any ,any > {

  constructor(props) {
      super(props);
      this.state = {
        selectValue: "US"
      };
      this.handleDropdownChange = this.handleDropdownChange.bind(this);
    }
  handleDropdownChange(e) {
      this.setState({ selectValue: e.target.value });
      this.props.test(e.target.value);
    }

    render() {
    const {classes} = this.props;
  return (

    <div className={classes.root}>
      <AppBar position="static" className={classes.appBar}>
        <Toolbar variant="dense">

          <Typography variant="h3" color="inherit">
            Disbursements Approval Dashboard
          </Typography>

          <FormControl className={classes.selectMenu} >

                  <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select" className={classes.select}
                    defaultValue="US"
                    onChange={this.handleDropdownChange}
                  >

                    <MenuItem value={'US'} >US</MenuItem>
                    <MenuItem value={'EUROPE'}>EUROPE</MenuItem>
                    <MenuItem value={'JAPAN'}>JAPAN</MenuItem>
                  </Select>
                </FormControl>

        </Toolbar>
        <div  >Selected value is : {this.state.selectValue}</div>
      </AppBar>

    </div>
  );}
}
export default withStyles(useStyles)(Appbar)
...