Как изменить фоновое изображение для параметра c div с помощью функции «onclick» в React. JS

Question

Спасибо за помощь моей нуждающейся заднице. Я работаю с ReactJS и пытаюсь получить div, чтобы изменить его фон с цвета на определенный c URL-адрес изображения при нажатии кнопки в модальном режиме. Я пробовал много вещей и продолжаю получать эту ошибку:
TypeError: Невозможно прочитать свойство 'style' со значением NULL

Я успешно console.log URL-адрес изображения и идентификатор div в onclick функция, но стиль 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

В реакции вы не должны использовать getElementById или любой другой способ изменить дом. У вас может быть что-то вроде этого:

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

Поэтому, когда вы делаете:

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

, фоновое изображение будет обновляться автоматически.

В вашем случае, если вы необходимо изменить другой фон div на основе идентификатора div, вы можете сохранить карту в своем состоянии, что-то вроде этого:

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

Строка кода выше может быть трудно понять на первый взгляд, если вы не используете оператору распространения, но на самом деле все просто: он добавляет новый ключ к карте backgroundColors, хранящейся в состоянии.

И вы бы использовали его так:

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

Answer 2

Вы можете использовать React ref api, чтобы получить ссылку на div, а затем вы можете изменить свойство стиля div.

Пример кода

В конструкторе класса

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