如何使用选择框更改 div 的背景样式？

Question

在我当前的 React 项目中，我需要能够将背景样式（图像、宽度、高度等）从 'div' 更改为九种不同的选项。

我已经用下面的代码试过了：

const styleOptions = [
  {
    backgroundImage: "",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    //backgroundSize: "650px 800px",
    backgroundSize: "cover"
  },
  {
    backgroundImage: "url(/PicturesPattern/Picture1.png)",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    //backgroundSize: "650px 800px",
    backgroundSize: "cover"
  },
  ...//same code for nine Pictures, only diffrent size values
]


class Example extends React.Component {
   state = {
      ...
      ...
      //for selectionField
      isDisabled: false,
      backgroundStyle: styleOptions[0]
   };
   ...
   ...
   ...
   onSelectChange = (event) => { 
      this.setState({
         ...
         currentStyle: styleOptions[event.value + 1]
      });
   };

   render() {
      return (
         <>
            //div for selectionField
            <div className="forBackground" style{this.backgroundStyle}>
            ...
            ...
            //other code
            ...
            ...
         </>
      )
   }
}

但是在我的选择字段发生任何变化时，特定 div 的背景不会发生任何变化。 当我为每个可能的索引添加“styleOptions [x]”时，我得到了特定的背景图像和其他样式选项。

我做错了什么？ 希望有人可以帮助我:)

Answer 1

好吧，在onSelectChange 函数和event.value + 1 部分中，您添加了两种不同类型的变量（字符串和整数）。结果 div 的背景样式不会正确更改。首先，你应该把这个函数写成如下

onSelectChange = (event) => {
    this.setState({
      backgroundStyle: styleOptions[parseInt(event.target.value) + 1],
    });
  };

然后，style{this.backgroundStyle} 应更改为 style={this.state.backgroundStyle}。我还添加了 height 属性并分配了 backgroundColor 以使 div 和更改更加可见

但也有其他一些小的修改。因此，请检查您的代码更正版本的sandbox。