React MaterialUI Выберите компонент MenuItem, должен печатать значение, когда ничего не выбрано - PullRequest
Новая
       6

React MaterialUI Выберите компонент MenuItem, должен печатать значение, когда ничего не выбрано

0 голосов
/ 16 ноября 2018

Я новичок в React, я использую Material UI для реагирования на проект. Я создал компонент Select MenuItem. В этом я передал изображение в качестве значения. Итак, если пользователь выберет опцию, он напечатает изображение. Мое требование: когда ничего не выбрано, он должен печатать все значения. Даже при загрузке страницы по умолчанию должны отображаться все изображения.

Мой код: 

      state = {
   name: '',
   open: false,
 };

 handleChange = event => {
   this.setState({ [event.target.name]: event.target.value });
 };

 handleClose = () => {
   this.setState({ open: false });
 };

 handleOpen = () => {
   this.setState({ open: true });
 };
 componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
    });
  }

    <FormControl variant="outlined" className={classes.formControl}>
                <InputLabel
                  ref={ref => {
                    this.InputLabelRef = ref;
                  }}
                  classes={{
                shrink: classes.inputLabelShrink
              }}
                  htmlFor="outlined-name-simple"
                  className="drop-input"
                >
                  I am a
                </InputLabel>
                <Select
                  value={this.state.name}
                  onChange={this.handleChange}
                  className="drop-select"
                  input={
                    <OutlinedInput
                      labelWidth={this.state.labelWidth}
                      name="name"
                      id="outlined-name-simple"
                    />
                  }

                >

                  <MenuItem className={classes.outlineInput} value={img}>School Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Business Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Non-profit Administrator</MenuItem>
                  <MenuItem className={classes.outlineInput} value={img}>Volunteer</MenuItem>
                </Select>
              </FormControl>

<img src={this.state.name} />

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 17 ноября 2018 
{ this.state.name ?(
              <img src={this.state.name} />
            ) : (

               <div className="right-img">
                  <img src={img} alt="" />
                  <img src={img} alt="" />
                  <img src={img} alt="" />
                  <img src={img} alt="" />
                </div>
          )}
0 голосов
/ 16 ноября 2018

заменить строку 

<img src={this.state.name} />

условной проверкой this.state.name, и, если она пуста, отобразить все картинки: 

{ this.state.name ? 
    <div>
        <img src={"..."} />
        <img src={"...'} />
        <img src={"..."} />
        //do this for each of the pictures you want to display
    </div>
 :
    <img src={this.state.name} />

}

Заменить значения src наURL-адреса изображений, которые вы хотите отобразить

...