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

Question

感谢您帮助我有需要的屁股。 我正在使用 ReactJS 并尝试让一个div 在单击模态中的按钮时将其背景从颜色更改为特定的图像 URL。 我已经尝试了很多事情，但不断收到此错误：类型错误：
无法读取 null 的属性"样式">

我成功地在 onclick 函数中控制台.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>

想谈谈MTG？也为此而失望！

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

如果您不习惯 spread 运算符，上面的代码行一开始可能很难理解，但它的作用实际上很简单：它添加了一个新键来映射存储在状态中的backgroundColors。

你会这样使用它：

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

Answer 2

你可以使用 Reactrefapi 来获取div 的引用，然后你可以更改div 的 style 属性。

示例代码

在类构造函数中

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