Блог

Главная - Вопросы по программированию - Почему эта переменная реакции не работает в моем объекте состояния?

Почему эта переменная реакции не работает в моем объекте состояния?

#javascript #reactjs #react-dom

Вопрос:

 class Squares extends React.Component {
    constructor() {
        super();
        this.color = 'blue';
    }

    state = {
        backgroundColor: this.color,
        width: "50px",
        height: "50px"
    };


    render () {

        return (
            <div>
                <div style={this.state}>Hello</div>
                <button>Add Square</button>
                <p>{this.state.backgroundColor}</p>
            </div>
        );
    }


}

этот.color выводит свое значение, но я не могу присвоить его этому.state.backgroundColor. В конечном итоге я хочу добавить событие onClick на кнопку, и когда я нажму на нее, я хочу вывести квадрат с измененным цветом.

Комментарии:

1. компонент state предназначен для использования для фрагментов данных, которые могут быть изменены … что означает только background-color ваш квадрат … как насчет того, чтобы весь style объект находился в состоянии компонента?

2. Почему бы вам не назначить blue цвет непосредственно состоянию во время инициализации и не обновить состояние нажатием setState кнопки «Вкл»?

Ответ №1:

Основная проблема здесь на самом деле заключается в том, как работает JS — любые переменные, определенные вне конструктора, инициализируются перед конструктором. Например:

 class Squares {
    constructor() {
        this.color = 'blue';
    }

    state = {
        backgroundColor: this.color,
        otherBackgroundColor: 'blue'
    };


    render () {
        console.log(this.state.backgroundColor)
        console.log(this.state.otherBackgroundColor)
    }
}

const s = new Squares();
s.render();

Поэтому , если вам нужен доступ this.color и вы инициализируете его в конструкторе, вам также необходимо инициализировать this.state его в своем конструкторе.

 class Squares {
    constructor() {
        this.color = 'blue';
        this.state = {
            backgroundColor: this.color,
        }
    }

  
    render () {
        console.log(this.state.backgroundColor)
    }
}

const s = new Squares();
s.render();

Ответ №2:

this.color = 'blue'; не управляется государством.

 constructor() {
    super();
    this.state = {
        backgroundColor: 'blue',
        width: "50px",
        height: "50px"
    };
  }

это должно сработать, и вместо изменения цвета обновите значение backgroundColor

Комментарии:

1. Что делать, если я хочу, чтобы цвет фона квадрата был случайным при его визуализации.. разве значение backgroundColor не должно быть переменной?

2. в этом случае вы можете инициализировать переменную, а затем непосредственно изменить состояние или сделать переменную тоже состоянием.

Ответ №3:

Некоторый рабочий код с кнопкой для добавления квадрата и выбора, чтобы изменить цвет фона квадрата.

Рабочая ссылка codesandbox — https://codesandbox.io/s/nice-chaplygin-0m87u

 import React, { Component } from "react";

class Squares extends Component {
  state = {
    showSquare: false
  };

  handleClick = () => {
    this.setState({
      showSquare: true
    });
  };

  handleChange = ({ target }) => {
    this.setState({
      backgroundColor: target.value
    });
  };

  render() {
    const { backgroundColor, showSquare } = this.state;
    return (
      <div>
        <div style={{ backgroundColor }} className={showSquare amp;amp; "square"}>
          Hello
        </div>
        <button onClick={this.handleClick}>Add Square</button>
        <select onChange={this.handleChange}>
          <option value="red">red</option>
          <option value="purple">purple</option>
          <option value="green">green</option>
        </select>
      </div>
    );
  }
}

export default Squares;
Метки: