时间戳

首页 > 解决方案 > React MaterialUI Select MenuItem 组件，应在未选择任何内容时打印值

reactjs - React MaterialUI Select MenuItem 组件，应在未选择任何内容时打印值

问题描述

我是 React 的新手，我正在使用 Material UI 和一个项目的 react。我创建了一个 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} />

提前致谢。

标签： reactjsmaterial-ui

解决方案

换行

<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

推荐阅读