Question

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

谢谢。

Answer 1

替换行

<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值替换为您要显示的图像的网址

Answer 2

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

React MaterialUI Select MenuItem组件，应在未选择任何内容时显示值

2 个答案: