React 中的键盘快捷键，react-hotkeys 库

Question

我的目标是调用 Todo 组件中的 setEditing () 函数。我创建了一个键盘快捷键：

const keyMap = {
   TEST: "t"
}; 

const handlers = {
    TEST: () => this.setEditing()
};

const MyHotKeysComponent = withHotKeys (Todo, {keyMap, handlers});

<MyHotKeysComponent>
   <p> press t </p>
</ MyHotKeysComponent>

你把这些元素放在 Todo 组件的哪一部分？

代码在这里：https://stackblitz.com/edit/react-cjkf1d?file=index.js

import {  withHotKeys } from "react-hotkeys";

class EditForm extends React.Component {
  render() {
    return (
      <div>
        <textarea onChange={(e) => this.props.handleDescription(e)} value={this.props.description}></textarea>
        <button onClick={this.props.onSave} type="submit">Save</button>
        <button onClick={this.props.onCancel} type="submit">Cancel</button>
      </div>
    )
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);

      this.state = {
        isEditing: false
      }
  }




  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    })
  }


  render() {
      const { hotKeys, ...remainingProps } = this.props;


    return (
      <div {...{ ...hotKeys, ...remainingProps }}>
        {this.state.isEditing

          ? (<EditForm
            handleChange={this.handleChange}
          />)
          : (
            <li>
              <div>
                {this.props.todo.date}
              </div>
              <div>
                {this.props.todo.description}
              </div>

              <button onClick={() => this.setEditing()}>Edit</button>

            </li>
          )

        }
      </div>
    )
  }
}



    const keyMap = {
      TEST: "t"
    };

    const handlers = {
      TEST: () => this.setEditing()
    };

    const MyHotKeysComponent = withHotKeys(Todo, { keyMap, handlers });

    <MyHotKeysComponent>
      <p>press t</p>
    </MyHotKeysComponent>


class App extends React.Component {
  constructor() {
    super();

    this.state = {

      todos: [
        {
          date: '2019-12-09',
          description: 'Hello'
        }
      ],
    };
  }


  render() {
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                />
              )
          }
        </ul>
      </div>
    );
  }
}

Answer 1

您可以使用HotKeys代替withHotKeys来处理组件的事件。

我已经为您创建了一个小演示来处理事件按键。

import { HotKeys } from "react-hotkeys";
import React, { Component } from 'react';
import { render } from 'react-dom';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: true
    }

    this.keyMap = {
      TEST: "t"
    };

    this.handlers = {
      TEST: (e) => {
        this.setEditing();
      }
    };
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    })
  }

  render() {
    return (
      <HotKeys keyMap={this.keyMap} handlers={this.handlers} >
        <span>My HotKeys are effective here</span><br />
        <b>isEditing: {this.state.isEditing.toString()}</b><br />

        {this.props.children}
      </HotKeys>
    );
  }
}

render(<MyComponent />, document.getElementById('root'));

React 中的键盘快捷键，react-hotkeys 库

更新代码：https://stackblitz.com/edit/react-hotkeys-demo?embed=1&file=index.js

我已经更新了您的代码，它按预期工作。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { HotKeys } from "react-hotkeys";

class EditForm extends React.Component {
  render() {
    return (
      <div>
        <textarea onChange={(e) => this.props.handleDescription(e)} value={this.props.description}></textarea>
        <button onClick={this.props.onSave} type="submit">Save</button>
        <button onClick={this.props.onCancel} type="submit">Cancel</button>
      </div>
    )
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditing: false
    }

    this.keyMap = {
      TEST: "t"
    };

    this.handlers = {
      TEST: () => this.setEditing()
    };
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    })
  }

  render() {
    return (
      <HotKeys keyMap={this.keyMap} handlers={this.handlers} >
        {this.state.isEditing ?
          <EditForm handleChange={this.handleChange} />
          : <li>
            <div>
              {this.props.todo.date}
            </div>
            <div>
              {this.props.todo.description}
            </div>
            <button onClick={() => this.setEditing()}>Edit</button>
          </li>
        }
      </HotKeys>
    )
  }
}


class App extends React.Component {
  constructor() {
    super();

    this.state = {

      todos: [
        {
          date: '2019-12-09',
          description: 'Hello'
        }
      ],
    };
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.todos.map((todo, index) =>
            <Todo
              key={index}
              index={index}
              todo={todo}
            />
          )}
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

希望对您有所帮助！

Answer 2

My goal is to call the setEditing () function in the Todo component.

您可以在 keyPress 上调用 setEditing 函数而无需使用 react-hotkeys。

我使用 React 的 onKeyDown 键盘事件来捕捉用户的按键操作。

onKeyDown={(e) => this.handleKeyPress(e)}

在 handleKeyPress() 函数中，我检查 keyCode 以确定用户按下了哪个键。 t的KeyCode是84，如果keyCode等于84，调用setEditing函数。像这样：

  handleKeyPress = e => {
    e.keyCode === 84 &&
      this.setEditing();
  }

此外，您可以使用 ref 来聚焦到 div，这是按键事件的目标元素。因此，您不必在按 t 之前单击它。

演示在这里：https://react-pgr9pt.stackblitz.io

代码在这里：https://stackblitz.com/edit/react-pgr9pt

React 中的键盘快捷键，react-hotkeys 库

Keyboard shortcuts in React, the react-hotkeys library

javascript

hotkeys

reactjs