問題実際に動的属性を利用する

Question

私の目標は、以下のコードで見られるように、クリックされたスクエアオブジェクトの関数handleClick（）にsquareNumを警告させることです。このような実装は機能しませんが。最初は、私はこのlinkに従って、バインディングを通して実装しようとしましたが、成功しませんでした。

クリック後、作成された正方形のオブジェクトは識別されず、レンダリングされたhtml（実際のボタン）が存在するため、バインディングの問題が存在すると思われます。

私は、正方形オブジェクトからデータを取得するレンダリングされたボタンhtml内にdata-id属性を作成しました。私はこのlinkに従って実装を進めました。

getAttributesが定義されておらず、何が間違っているかわからないというエラーが表示されます。

getAttributesの問題の解決に加えて、これを実装するより良い方法があるので、それぞれのsquareNumはクリック時に識別されますか？事前に

おかげ

CODEPEN

CODE

class Square extends React.Component { 
    //constructor 
    constructor() { 
    super(); 
    this.state = { 
     value: null, 
     squareNum: null, 
    }; 
    } 

    render() { 
    return (
     //<button className="square" onClick = {() => this.setState({value: 'X'})}> 
     //  <button className = "square" data-id = {this.props.squareNum} onClick = {() => this.props.onClick()}> 
     <button className="square" data-id = {this.props.squareNum} onClick = {this.onClickSquare()}> 
      {this.props.value} 
     </button> 
    ); 
    } 

    onClickSquare() { 
    this.props.onClick(this.props.squareNum); 
    } 
} 

class Board extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     squares: Array(9).fill(null), 
    }; 
    } 

    renderRow(i) { 
    var rowSquare = []; 
    var square; 

    //{objects.map((o, i) => <ObjectRow obj={o} key={i}/>} 

    // create row of 3, creating square elements in array then return array 
    for(var iterator = i; iterator < i+3; iterator++) { 
     square = <Square key = {iterator} squareNum = {iterator} value = {this.state.squares[iterator]} onClick = {() => this.handleClick} />; 
     rowSquare.push(square); 
    } 
    return <div className ="board-row"> 
     {rowSquare} 
    </div> 
    } // end of renderRow() 

    render() { 
    const status = 'Next player: X'; 
    return (
     <div> 
     <div className="status">{status}</div> 
     {this.renderRow(0)} 
     {this.renderRow(3)} 
     {this.renderRow(6)} 
     </div> 
    ); 
    } 

    handleClick(squareId) { 
    // utilize slice to copy not change state 
    // want to keep mutating changes to setState only 
    const squares = this.state.squares.slice(); 
    alert(squareId); 
    //squares[i] = 'X'; 
    this.setState({squares: squares}); 

    } // end of handleClick 

} 

class Game extends React.Component { 
    render() { 
    return (
     <div className="game"> 
     <div className="game-board"> 
      <Board /> 
     </div> 
     <div className="game-info"> 
      <div>{/* status */}</div> 
      <ol>{/* TODO */}</ol> 
     </div> 
     </div> 
    ); 
    } 
} 

Answer 1

あなたの例でいくつかの問題は、あなたが親クラスに小道具を渡していない主なことがあります。さらに、onClickハンドラには機能が必要です。 ES6矢印関数は暗黙的にコンテキストをバインドするので、匿名コールバックでハンドラをラップすることができます。 getAttributesエラーについては、その属性のDOMを照会しようとしていたのですが、その要素を適切に選択していないか、その参照を保持していなかったと思います。それにもかかわらず、残りの部分はかなりストレートでなければならず、data-id属性をまったく使用する必要はありません。このことができますhttps://codepen.io/anon/pen/Kavmyz?editors=0010

class Square extends React.Component { 
    //constructor 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: null, 
     squareNum: null, 
    }; 
    } 

    render() { 
    return (
     <button className="square" onClick = {() => this.onClickSquare()}> 
      {this.props.value} 
     </button> 
    ); 
    } 

    onClickSquare() { 
    this.props.onClick(this.props.squareNum); 
    } 
} 

class Board extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     squares: Array(9).fill(null), 
    }; 
    } 

    renderRow(i) { 
    var rowSquare = []; 
    var square; 

    // create row of 3, creating square elements in array then return array 
    for(var iterator = i; iterator < i+3; iterator++) { 
     square = (<Square 
       key={iterator} 
       squareNum={iterator} 
       value={this.state.squares[iterator]} 
       onClick={(squareNum) => this.handleClick(squareNum)} />); 
     rowSquare.push(square); 
    } 
    return <div className ="board-row"> 
     {rowSquare} 
    </div> 
    } // end of renderRow() 

    render() { 
    const status = 'Next player: X'; 
    return (
     <div> 
     <div className="status">{status}</div> 
     {this.renderRow(0)} 
     {this.renderRow(3)} 
     {this.renderRow(6)} 
     </div> 
    ); 
    } 

    handleClick(squareId) { 
    // utilize slice to copy not change state 
    // want to keep mutating changes to setState only 
    const squares = this.state.squares.slice(); 
    squares[squareId] = squareId; 
    this.setState({squares: squares}); 

    } // end of handleClick 
} 

希望を参照してください！