Question

我需要在value事件之后访问每个<Square />类的handleClick属性，以便将其显示在button上，例如“ X “ 在这种情况下。每当我尝试类似{this.props.cell.value}之类的操作时，即使在{this.props.cell[this.props.id].value}上它也会引发错误。

（该代码未完成，因此以后将无法理解“ X”或“ O”的逻辑）

class App extends Component {
  constructor() {
    super()
    this.state = {
      cell: [{id: 1,value: null},{id: 2,value: null},{id: 3,value: null},{  id: 4,value: null},{id: 5,value: null},{id: 6,value: null},{id: 7,value: null},  {id: 8,value: null},{id: 9,value: null}];
 }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(x) {
    const cell = [...this.state.cell]
    cell[x].value = "X"
    return this.setState({ cell })
  }

  render() {
    return (
      <div>
        {
          <Table
            item={this.state.cell}
            handleClick={this.handleClick}
          />
        }
        <button className="btn btn-primary">Start Game</button>
      </div>
    );
  }
}

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div id="table">
        {this.props.item.map(a => (
          <Square
            key={a.id}
            id={a.id}
            handleClick={this.props.handleClick}
          />
        ))}
      </div>
    );
  }
}

class Square extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <button
        className="cell"
        onClick={() => this.props.handleClick(this.props.id)}
      >
        *{??????}*
      </button>
    );
  }
}

Answer 1

您可以传递另一个具有Square值的属性，然后显示它：) 像这样：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      cell: [{id: 1,value: null},{id: 2,value: null},{id: 3,value: null},{ id: 4,value: null},{id: 5,value: null},{id: 6,value: null},{id: 7,value: null},{id: 8,value: null},{id: 9,value: null}]};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(x) {
    const cell = [...this.state.cell]
    cell[x-1].value = "X"
    return this.setState({ cell })
  }

  render() {
    return (
      <div>
        {
          <Table
            item={this.state.cell}
            handleClick={this.handleClick}
          />
        }
        <button className="btn btn-primary">Start Game</button>
      </div>
    );
  }
}

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div id="table">
        {this.props.item.map(a => (
          <Square
            key={a.id}
            id={a.id}
            value={a.value}
            handleClick={this.props.handleClick}
          />
        ))}
      </div>
    );
  }
}

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <button
        className="cell"
        onClick={() => this.props.handleClick(this.props.id)}
      >
      {this.props.value}
      </button>
    );
  }
}

请注意，我为每个Square添加了一个名为value的属性，并将其传递给value={a.value}。

然后以正方形显示：) {this.props.value}

另外，我将handleClick中的分配更改为：cell[x-1].value = "X"，因为id从1开始，但是数组的第一项索引为0。

如何仅通过ID从父组件的状态访问子组件上的数据

1 个答案: