ReactJS은 - 기본 스도쿠 프로그램을 만들려고 노력, JS에 정의되지 않은 "

Question

새로운 재산 'updateNumber'를 읽고 반응하지 수

을 나는 셀 구성 요소의 속성으로 UpdateNumberInCell = {this.updateNumber} 추가 할 때. "catch되지 않은 형식 오류 : 속성을 읽을 수 없습니다 정의의 'updateNumber'". 나는 오류 얻을. 내가 시간이 응시했는데 뭐가 잘못 이해하지를 아마 아주 기본적인 것을

전체 코드를 :.

class Cell extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = {editing: false}; 
    } 

    editCell() { 
     this.setState({editing: true}); 
    } 

    editingDone() { 
     let number = this.refs.newNumber.value; 
     this.props.updateNumberInCell(number, this.props.index); 
     this.setState({editing: false}); 
    } 

    renderEditing() { 
     return <td><textarea ref="newNumber" onBlur={this.editingDone.bind(this)} onKeyPress={this.editingDone.bind(this)} defaultValue={this.props.children} 
          maxLength="1" cols="1" rows="1" autoFocus /></td>; 
    } 

    renderNormal() { 
     if (this.props.editable) { 
      return <td onClick={this.editCell.bind(this)}>{this.props.children}</td>; 
     } else { 
      return <td>{this.props.children}</td>; 
     } 
    } 

    render() { 
     if (this.state.editing) { 
      return this.renderEditing(); 
     } else { 
      return this.renderNormal(); 
     } 
    } 

} 


class Board extends React.Component { 

    constructor(props) { 
     super(props); 

     let boardList = []; 
     let i = 0; 
     for (let r = 0; r < 3; r++) { 
      boardList.push([]); 
      for (let c = 0; c < 3; c++) { 
       let number = this.props.boardString[i]; 
       if (number !== "0") { 
        boardList[r].push(
          { 
           "index": i, 
           "number": number, 
           "editable": false, 
           "inConflict": false 
          }); 
       } else { 
        boardList[r].push({ 
         "index": i, 
         "number": number, 
         "editable": true, 
         "inConflict": false 
        }); 
       } 
       i++; 
      } 
     } 
     console.log(JSON.stringify(boardList)); 

     this.state = {boardList}; 
    } 

    updateNumber(number, index) { 
     let newBoardList = this.state.boardList; 
     for (let row = 0; row < 3; row++) { 
      for (let col = 0; col < 3; col++) { 
       if (newBoardList[row][col].index === index) { 
        newBoardList[row][col].number = number; 
        this.setState({boardList: newBoardList}); 
       } 
      } 
     } 
    } 

    renderCell(cell, i) { 
     return (
       <Cell key={i} index={cell.index} editable={cell.editable} updateNumberInCell={this.updateNumber}>{cell.number}</Cell>); 
    } 

    render() { 
     return (<div>              {/*map means return a new array and do this function for each element in the list*/} 
        <table> 
         <tbody> 
         <tr> 
          {this.state.boardList[0].map(this.renderCell)} 
         </tr> 
         <tr> 
          {this.state.boardList[1].map(this.renderCell)} 
         </tr> 
         <tr> 
          {this.state.boardList[2].map(this.renderCell)} 
         </tr> 
         </tbody> 
        </table> 
       </div> 
     ); 
    } 

} 


ReactDOM.render(<Board boardString="102840503" />, document.getElementById("sudoku")); 

Answer 1

이 오류가 발생했습니다. renderCell 내부의참조는 정의되지 않았습니다. 콜백에서 올바른 this 참조 정보를 얻으려면 bind 메소드를 사용해야합니다.

근무 코드 :

renderCell(cell, i) { 
    return (
      <Cell key={i} index={cell.index} editable={cell.editable} updateNumberInCell={this.updateNumber.bind(this)}>{cell.number}</Cell>); 
} 

render() { 
    return (<div>              {/*map means return a new array and do this function for each element in the list*/} 
       <table> 
        <tbody> 
        <tr> 
         {this.state.boardList[0].map(this.renderCell.bind(this))} 
        </tr> 
        <tr> 
         {this.state.boardList[1].map(this.renderCell.bind(this))} 
        </tr> 
        <tr> 
         {this.state.boardList[2].map(this.renderCell.bind(this))} 
        </tr> 
        </tbody> 
       </table> 
      </div> 
    ); 
} 

또는 대신 생성자에서 bind을 사용할 수는 :

constructor(props) { 
    super(props); 

    this.state = {editing: false}; 

    this.renderCell = this.renderCell.bind(this); 
    this.updateNumber = this.updateNumber.bind(this); 
}