如何使用 React.JS 中的 'onclick' 函数更改特定 div 的背景图片

Question

感谢您帮助我有需要的屁股。我正在使用 ReactJS 并尝试通过单击模式中的按钮来获得 div 以将其背景从颜色更改为特定图像 url。我已经尝试了很多东西并不断收到此错误：
TypeError: 无法读取 null

的属性 'style'

我在 onclick 函数中成功 console.log 图像 URL 和 div ID，但是 div 样式没有任何进展...感谢所有帮助！

这是我的按钮

<button onClick={() => { this.changeUserBG(this.state.AlexPics[0], "one") }} className="btn btn-danger">Kaalia of the Vast</button>

这里是我调用的函数

  changeUserBG = (imageUrl, userArea) => {
        let thisOne = document.getElementById(userArea);
        console.log(thisOne)
        thisOne.style.backgroundColor = 'red'
        // document.getElementById("one").style.backgroundImage = `require(url(${imageUrl}))`;

    }

这是我要操作的 div 区域：


<div className="col-6" id="one">

       <div className="">

         <p className="lifeArea">
          <button className="minusOne" onClick={() => { 
              this.subtractOne("playerOne") }}>-1</button>
             <span id="playerOne">40</span>
             <button className="plusOne" onClick={() => { 
             this.addOne("playerOne") }}>+1</button>
         </p>

{/* Theme Modal that has ASK sub modals */}
<p className="bgCheckButton">
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
</p>
</div>

想谈谈万智牌吗？也赞同！

Answer 1

在 React 中，你不应该使用 getElementById 或任何改变 dom 的方法。你可以有这样的东西：

<div style={{backgroundImage: this.state.image}}>...</div>

所以无论何时：

this.setState({ image: 'some_value.png' });

背景图片会自动更新。

在您的情况下，如果您需要根据 div ID 更改不同的 div 背景，您可以在您所在的州存储一张地图，如下所示：

clickHandler = (divId, color) => {
   this.setState(state => ({ backgroundColors: { [divId]: color, ...state.backgroundColors} }));
}

如果你不习惯展开运算符，上面这行代码一开始可能很难理解，但它的作用其实很简单：它向存储在状态。

你会这样使用它：

<div id="foo" style={{ backgroundImage: this.state.backgroundColors["foo"]}}>...</div>

Answer 2

您可以使用 React ref api 获取 div 的引用，然后您可以更改 div 的样式属性。

示例代码

在Class构造函数中



constructor() {
  this.userAreaRef = React.createRef();
}

changeUserBG = (imageUrl, userArea) => {
  let thisOne = this.userAreaRef;
  console.log(thisOne)
  thisOne.current.style.backgroundColor = 'red'
}

渲染

 <div ref={this.userAreaRef} className="col-6" id="one">
            <div className="">
                <p className="lifeArea">
                    <button className="minusOne" onClick={()=> { 
this.subtractOne("playerOne") }}>-1</button>
                    <span id="playerOne">40</span>
                    <button className="plusOne" onClick={()=> { 
this.addOne("playerOne") }}>+1</button>
                </p>
                {/* Theme Modal that has ASK sub modals */}
                <p className="bgCheckButton">
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
                </p>
            </div>
        </div>

在功能组件中

const someFunction = () => {
  const userAreaRef = useRef();

  changeUserBG = (imageUrl, userArea) => {
    let thisOne = userAreaRef;
    console.log(thisOne)
    thisOne.current.style.backgroundColor = 'red'
  }

  return (
    <div ref={this.userAreaRef} className="col-6" id="one">
            <div className="">
                <p className="lifeArea">
                    <button className="minusOne" onClick={()=> { 
this.subtractOne("playerOne") }}>-1</button>
                    <span id="playerOne">40</span>
                    <button className="plusOne" onClick={()=> { 
this.addOne("playerOne") }}>+1</button>
                </p>
                {/* Theme Modal that has ASK sub modals */}
                <p className="bgCheckButton">
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">Theme</button>
                </p>
            </div>
        </div>
  );
}

如何使用 React.JS 中的 'onclick' 函数更改特定 div 的背景图片

How to change background image of specific div with 'onclick' function in React.JS

html

javascript

css

background

reactjs