Javascript 通知键关闭事件的同级组件

我有一个

，它定义了一个

onKeyDown

道具，当按下一个键时会触发该道具。在回调中，我检查keycode是否匹配某个键（在本例中为向上或向下箭头键）

每当按下一个匹配键时，我需要通知与

方法相同的

render（）

同级组件

以下是相关代码：

handleKey(e) {
    let keyCode = e.keyCode;
    //Handle up arrow press.
    if (keyCode == 38) {
      console.log('up arrow pressed')
    }
    //Handle down arrow press.
    if (keyCode == 40) {
      console.log('down arrow pressed')
    }
}

render() {
    return (
      <div className="chat-input">
        {this.state.showCommandPopup && <CommandPopup input={this.state.inputValue}/> }
        <form onSubmit={this.handleSubmit.bind(this)}>
            <Input onKeyDown={this.handleKey.bind(this)} value={this.state.inputValue} onChange={this.onInputChange.bind(this)} className="chat-input-comp" placeholder="Say something. You can use / to search, and . for commands." action='Send'/>
            //....
        </form>
      </div>
    );
}

handleKey（e）{
设keyCode=e.keyCode；
//手柄向上箭头按下。
如果（键代码==38）{
console.log（'按下向上箭头'）
}
//手柄向下箭头按下。
如果（键代码==40）{
console.log（'按下向下箭头'）
}
}
render（）{
返回(
{this.state.showcomandpopup&}
//....
);
}

每当按下向上或向下箭头键时，如何通知我的

组件？

步骤1。
您需要在handleKey（）方法中调用setState。一旦setState被调用，父组件和子组件将重新渲染

handleKey(e) {
    let keyCode = e.keyCode;
    //Handle up arrow press.
    if (keyCode == 38) {
      this.setState({keyvalue:keyCode})
      console.log('up arrow pressed')
    }
    //Handle down arrow press.
    if (keyCode == 40) {
      console.log('down arrow pressed')
      this.setState({keyvalue:keyCode})
    }
//  It will call render() Method
}

第二步

在需要添加的CommandPopup组件中，

组件将接收Props（newProps）

在

componentWillReceiveProps（newProps）内部，

您将获得

input={this.state.inputValue}的更新值

componentWillReceiveProps(newProps){
  console.log(newProps.keyvalue,'keycode')
}

---

您只需要引发一个事件，没有什么可以阻止您使用js事件。但是我认为您没有采取正确的方法，因为react不是一个基于事件的框架，使用诸如redux或mobx之类的状态容器可能有更好的解决方案
在

CommandPopup

组件上，您只需订阅事件。

class CommandPopup extends Component {
    componentDidMount() {
        window.addEventListener('keyUp', () => {
            console.log('Key UP ...');            
        });

        window.addEventListener('keyDown', () => {
            console.log('Key DOWN ....');            
        });
    }

    render() {
        return (
            <div>Something ...</div>
        );
    }

}

class命令弹出扩展组件{
componentDidMount（）{
window.addEventListener（'keyUp'，（）=>{
log（'Key UP…'）；
});
window.addEventListener（'keyDown'，（）=>{
console.log（'Key DOWN…'）；
});
}
render（）{
返回(
某物
);
}
}

只需发送事件：

handleKey(e) {
    let keyCode = e.keyCode;
    //Handle up arrow press.
    if (keyCode == 38) {
      const ev = new Event('keyUp', { 'bubbles': true, 'cancelable': false });
      document.dispatchEvent(ev);            
    }
    //Handle down arrow press.
    if (keyCode == 40) {
      const ev = new Event('keyDown', { 'bubbles': true, 'cancelable': false });
      document.dispatchEvent(ev);
    }
}

render() {  
    return (
      <div className="chat-input">
        {this.state.showCommandPopup && <CommandPopup input={this.state.inputValue}/> }
        <form onSubmit={this.handleSubmit.bind(this)}>
            <Input onKeyDown={this.handleKey.bind(this)} value={this.state.inputValue} onChange={this.onInputChange.bind(this)} />
        </form>
      </div>
    );
}

handleKey（e）{
设keyCode=e.keyCode；
//手柄向上箭头按下。
如果（键代码==38）{
const ev=新事件（'keyUp'，{'bubbles'：true，'cancelable'：false}）；
文件。调度事件（ev）；
}
//手柄向下箭头按下。
如果（键代码==40）{
const ev=新事件（'keyDown'，{'bubbles'：true，'cancelable'：false}）；
文件。调度事件（ev）；
}
}
render（）{
返回(
{this.state.showcomandpopup&}
);
}

同样，也许您应该看看mobx计算值，这是他们可以解决的问题

---

希望获得此帮助。

将密钥保存到状态，并将其传递给CommandPopup，因为如果不阻止，则在更改状态后将发生重新渲染。为什么不使用状态来执行此操作？并将道具传递给

命令弹出窗口

。类似于：

我不关心键的值，只关心事件。例如，如果我将键保存到状态，然后将状态传递到

，我将如何检测2次向上箭头按下？如果只查找上下键，则该值不会更改。在你所在的州，你可以有一个计数器，然后通过它。每次按下另一个键时，将计数重置回0。我不确定，但我不认为有什么方法可以做你想做的（将事件处理程序传递给同级）。你想知道按下了哪个键或每个键按了多少次吗？要通知你的同级，你需要传递一些信息给他们。当您传递input={this.state.inputvalue}时，只需调用setState和inside componentWillReceiveProps方法，您就可以得到相应的值。

input

prop inside

用于从同级

组件中给出当前的输入值。这不会接收箭头键事件。请重新阅读我在问题下方的评论。环绕，然后将任何其他道具传递给子组件。