javascript - React，快捷键库中的键盘快捷键

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

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>
    );
  }
}

最佳答案

您可以使用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，快捷键库中的键盘快捷键

更新的代码: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'));

希望这对您有所帮助!

关于javascript - React，快捷键库中的键盘快捷键，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57719123/