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

Question

On my current project in React I need to have the possibility to change the background-style (image, width, height etc.) from a 'div' to nine different options.

I've tried it with following code:

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

But on any change from my selection field, there isnt happening anything to the background of the specific div. When I put "styleOptions[x]" for x every index possible, I get the specific background image and other style options.

What am I doing wrong? Hope someone can help me:)

Answer 1

Well, in the onSelectChange function and in the event.value + 1 part you are adding two different types of variables (string and integer). As a result the background styles of div would not change properly. First, you should write this function as below

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

Then, style{this.backgroundStyle} should be changed to style={this.state.backgroundStyle} . I also added the height attributes and assigned a backgroundColor to make the div and changes more visible

But there were also other minor modifications. So, check the sandbox of the corrected version of your code.