React MaterialUI选择MenuItem组件，当未选择时应打印值

Question

我是一个新的反应，我正在使用材料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} />

提前道谢。

Answer 1

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

Answer 2

替换行

<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} />

}

用要显示的图像的URL替换src值