ReactJS：別のコンポーネントにキーコードを渡す方法

Question

入力フィールドと別のコンポーネントがあります。私は2番目のコンポーネントにイベントkeyCodeを取得する必要があります。

いくつかの投稿が接続されているわけではありません。refはこのための最善の方法ではありません。私は実際にそれを理解していない...

親

class Parent extends Component { 
    render() { 
    return(
     <Input onKeyDown={() => { console.log('triggered keydown') }} /> 
     <Child /> 
    ) 
    } 
} 

子供

class Child extends Component { 
    handleKeyDown (e) { 
    console.log(e.keyCode) // <- Get Keycode from parent triggered keydown event 
    } 
    render() { 
    } 
} 

Answer 1

使用setState()状態で現在のkeyCodeを更新し、子供にそれを渡します支柱を介して。

小児では、小道具を直接使用するか、componentWillReceiveProps()で処理し、結果を状態に設定します。

class Parent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = {}; 
 
    } 
 

 
    onKeyDown = (e) => this.setState({ keyCode: e.keyCode }); 
 

 
    render() { 
 
    const { keyCode } = this.state; 
 
    
 
    return (
 
     <div> 
 
     <input onKeyDown={this.onKeyDown} /> 
 
     
 
     <Child keyCode={keyCode} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     doubleKeyCode: [] 
 
    }; 
 
    } 
 
    
 
    handleKeyDown = (keyCode = 0) => this.setState((prevState) => ({ 
 
    doubleKeyCode: [...prevState.doubleKeyCode, keyCode * 2] 
 
    })); 
 
    
 
    componentWillReceiveProps(nextProps) { 
 
    this.handleKeyDown(nextProps.keyCode); 
 
    } 
 

 
    render() { 
 
    const { doubleKeyCode } = this.state; 
 
    
 
    console.log(`render: ${doubleKeyCode}`); 
 
    
 
    return (
 
     <div>{doubleKeyCode.join(', ')}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent />, 
 
    demo 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="demo"></div>