키 입력의 개체로 상태 업데이트 [반응]

Question

키 입력을 기반으로 구성 요소의 상태를 업데이트하고 다른 구성 요소로 전달하려고합니다.

내가 얻을 keyboardInput()를 호출하고 올바르게 화살표 키 중 하나를 누를 때 CONSOLE.LOG 수 있습니다, 그러나 나는 반환 된 값이 <p>The current input is: {this.keyboardInput}</p>

일예로 렌더링 할 수 없습니다 return {'Y': 1}; 위로 키를 누를 때 아무 것도 나타나지 않는다.

나는 componentWillReceiveProps 기능에 관해서 약간의 이해를 잃어 버렸 으리라 생각하지만, 나는 실망했다.

keyboardInput이 문자열 값이 아닌 개체를 반환 할 수 있습니까? 그러나 반환 값을 문자열로 변경하더라도 여전히 렌더링 할 수는 없습니다.

무엇이 여기에 있습니까?/JS 여기에 일반적으로 구축 반작용에 대한 몇 가지 오해가있는 것 같은

감사합니다,

class GameBoard extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      test: {}, 
     }; 
    } 

    // Captures event from main window 
     keyboardInput = (e) => { 

      const code = e.keyCode ? e.keyCode : e.which; 

      // Change X and Y values 
      if (code === 38) { //up key 
       return {'Y': 1}; 
      } else if (code === 40) { //down key 
       return {'Y': -1}; 
      } else if (code === 37) { // left key 
       return {'X': 1}; 
      } else if (code === 39) { // right key 
       return {'X': -1}; 
      } 
     }; 

    componentWillMount() { 
     window.addEventListener('keydown', this.keyboardInput); 
    } 

    componentWillUnmount() { 
     window.removeEventListener('keydown', this.keyboardInput); 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState.test = this.keyboardInput(nextProps); 
    } 

    render() { 

     return (
      <div> 
       <p>The current input is: {this.keyboardInput}</p> 
       <Ball/> 
      </div> 
     ) 
    } 

} 

class App extends Component { 

    render() { 

     const boardStyle = { 
      'position': 'absolute', 
      'backgroundColor': '#7f8c8d', 
      'height': '100%', 
      'width': '100%', 

     }; 

    return (
     <div> 
     <header> 
      <h1 className="App-title">Welcome to Moving Objects</h1> 
     </header> 
      <div style={boardStyle}> 
       <GameBoard/> 
      </div> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

보인다.

아래 내용이 도움이 되었길 바라며, React docs를 자세히 살펴보고 자신이하고있는 일에 대해 더 잘 이해해야합니다. 당신의 render 기능에

{this.keyboardInput} 실제로 여기에 아무것도 참조하지 않습니다 - this이 GameBoard 클래스를 참조하고, 다음 몇 가지 멤버에 액세스하려는 - keyboardInput라고 - 그것은 어떤 함수, 변수합니다. 당신은 하나도 가지고 있지 않습니다.

React를 사용하면 액세스하려는 것은 {this.state.keyboardInput}입니다. 즉, this (게임 보드)에서 현재 state에 액세스하고 싶습니다. state에는 keyboardInput이라는 필드가 있습니다. 그것을 렌더링하십시오.

<p> The current input is: {this.state.keyboardInput} </p> 

번째 단계는 실제로 는 그 상태를 설정하는 것이다. 이벤트 수신기가 이벤트를 수집 할 때 함수 keyboardInput을 호출 한 것처럼 보입니다. 그러나 이것이 문제의 일부라고 생각합니다 : keyboardInput은 onKeyboardInput 또는 handleKeyboardInput과 같은 이름이 좋습니다.

상태를 설정하는 방법을 기억하십니까? 그 함수 내부에서, 우리의 반작용 setState 기능을 사용해야 할거야 - 그것은 다음과 같이 보일 것입니다 :

handleKeyboardInput = (e) => { 
     const code = e.keyCode ? e.keyCode : e.which; 

     if (code === 38) { //up key 
      this.setState({ keyboardInput: {'Y', -1 }}); 
     } 
} 

이 기능은 현재 GameBoard 이봐, 당신의 상태가 지금 필드를해야 할 것입니다 ", 말하는

keyboardInput , 이는 객체 { 'Y', -1 }처럼 보일 것입니다."keyboardInput에서 this 구성 요소의 반응을 참조하고 싶어, 그래서 우리는 우리의 청취자이 결합해야한다는

참고 :

componentWillMount() { 
     window.addEventListener('keydown', this.handleKeyboardInput.bind(this)); 
} 

우리가 여기서하고있는 모든이 같은 this를 사용하는 handleKeyboardInput을 말하고있다 componentWillMount에서 this 우리 GameBoard 구성 요소를 의미 componentWillMount한다. 그래서 thishandleKeyboardInput에 또한 GameBoard을 참조한다. 우리는이 원하는 handleKeyboardInput이 GameBoard의이 .setState 함수를 호출하고 싶어하기 때문이다.

일반적으로 이것이 React의 흐름입니다. setState을 사용하는 구성 요소에 state을 설정하려고합니다. 완료되면 render 함수 (또는 해당 함수의 다른 함수)에서 this.state.foobar이라고 말하면됩니다.

이 예제에서 우리는 청취자부터 시작합니다. 우리는 키 누르기 이벤트를보고, 우리가해야 할 일을 handleKeyboardInput에 처리하도록하십시오! handleKeyboardInput은 GameBoard라고 말합니다. 귀하의 주정부는 keyboardInput: foo입니다. 그동안 렌더링은 GameBoard의 상태 (keyboardInput!)를 표시합니다. 그들이 가지고 정말 싱크대 수 있도록 확실히의 반작용 설명서를 살펴보고, 어쩌면 예제 프로젝트를 통해 작업