javascript - 使用react我试图在单击时更新值时更改按钮的颜色

我正在尝试使用onClick和value对一组框进行反应来更新颜色。

我尝试了几种不同的方法，但是没有用。我最终希望使颜色与井字游戏中的不同变化保持一致。

    function Square(props) {
      return (
        <button className="square" onClick={props.onClick}>
          {props.value},
          {props.style},

        </button>
      );
    }



    class Board extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          backgroundColor: 'gray';
          squares: Array(9).fill(null),
          xIsNext: true,

        };
      }

      handleClick(i) {
        const squares = this.state.squares.slice();
        const { containerStyle } = styles;
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        backgroundColor = this.state.xIsNext ? 'blue' : 'red';
        this.setState({
          backgroundColor: 'someNewColor',
          squares: squares,
          xIsNext: !this.state.xIsNext,
        });
      }

      renderSquare(i) {
        return (
          <Square
            value={this.state.squares[i]}
            color={this.state.backgroundColor}
            onClick={() => this.handleClick(i)}
          />
        );
      }

最佳答案

我不确定您的呈现方式，您的代码似乎有很多问题。

这是工作代码，并且在单击正方形时更改背景颜色。

不是全部代码，但是这将使您了解应如何编码。

import React from "react";
import ReactDOM from "react-dom";

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: 'gray',
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      backgroundColor: this.state.xIsNext ? 'yellow': 'red',
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i] || 'X'}
        color={this.state.backgroundColor}
        onClick={() => this.handleClick(i)}
      />
    );
    }
    render () {
      return (<div>
        {this.renderSquare(1)}
      </div>);
    }
  }

function Square(props) {
  return (
    <button className="square" onClick={props.onClick} style={{ backgroundColor: props.color}}>
      {props.value}
    </button>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Board />, rootElement);

希望有帮助！！！

关于javascript - 使用react我试图在单击时更新值时更改按钮的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58056120/