борется с REACT (setState ())

Question

Новое для реагирования, проблема проста, есть три «цветные» кнопки.При щелчке по нему тег h1 изменяется на цвет кнопок.По умолчанию h1 черный.

const root = document.getElementById("root");


class ChangeColors extends React.Component {
  constructor() {
    super();
    this.state = { color: "black" };
  }
  render() {
    const styleChange = () => {
      this.setState({ color: this.state.color })
    }
    return (
      <div>
        <h1 style={style}>Change My Colour!</h1>
        <p>
          <button onClick={this.styleChange} style={color: 
  red}>Red</button>
          <button onClick={this.styleChange} style={color: 
    blue}>Blue</button>
          <button onClick={this.styleChange} style={color: 
   green}>Green</button>
        </p>
      </div>
    );
  }
}

ReactDOM.render(<ChangeColors />, root);

Answer 1

В вашем коде много синтаксических ошибок, но есть фиксированная версия: https://codesandbox.io/s/62row8358z

Answer 2

Это React, в автоматически связанном обработчике событий React (метод создан как функция стрелки) this - это экземпляр класса (из ChangeColors), а не элемент (кнопка), на котором произошло событие.

Обработчик styleChange должен быть объявлен на уровне класса, а не в методе рендеринга.

Также атрибуты стиля должны быть записаны таким образом style={{ ...obj }}. Поскольку не строка, значение jsx должно быть заключено в {}, а само значение является объектом в случае атрибута style.

И, наконец, значение цвета в атрибуте style должно быть строкой, красный, синий и зеленый константы css без кавычек работать не будут.

const root = document.getElementById("root");


class ChangeColors extends React.Component {
  constructor() {
    super();
    this.state = { color: "black" };
  }
  styleChange = (evt) => {
      this.setState({ color: evt.target.style.color })
  }
  render() {
     
    return (
      <div>
        <h1 style={{ color: this.state.color}}>Change My Colour!</h1>
        <p>
          <button onClick={this.styleChange} style={{color: 'red' }}>Red</button>
          <button onClick={this.styleChange} style={{color: 'blue' }}>Blue</button>
          <button onClick={this.styleChange} style={{color: 'green' }}>Green</button>
        </p>
      </div>
   );
  }
}

ReactDOM.render(<ChangeColors />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

В настоящее время, когда вызывается this.styleChange, он устанавливает состояние в текущий цвет в состоянии.Чтобы передать цвет с кнопки, необходимо добавить его в качестве параметра:

const styleChange = (newColor) => {
  this.setState({ color: newColor })
}
...
<h1 style={{ color: this.state.color }}>Change My Colour!</h1>
<button onClick={() => this.styleChange("red")} style={{ color: "red" }}>Red</button>
etc.