如何在 React 中放弃输入按 ESC 的更改？

Question

我正在尝试制作一个具有保持状态值的输入。当我写东西并按 ENTER 时，我想保存状态中的值，确认并发送该值（默认情况下我有 console.log）。并且有效。

但是我需要做第二个功能。当我写东西并按 ESC 时，我想放弃更改并返回到以前的值。所以我的意思是，如果输入的值为“JAVA”，我写“SCRIPT”并按 ESC，我的状态仍然是“JAVA”。

这是我现在的一段代码。

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  componentDidMount() {
    const value = "Name";
    this.setState({ name: value });
  }

  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.onSendName();
    }
    if (e.keyCode === 27) {
      //display old value without any changes
    }
  };

  onSendName = () => {
    const { name } = this.state;
    console.log("Enter", name);
  };

  handleChange = (e) => {
    this.setState({ name: e.target.value });
  };

  render() {
    const { name } = this.state;
    return (
      <div className="App">
        <input
          value={name}
          onChange={this.handleChange}
          onKeyDown={this.handleKeyDown}
        />
        <div>My state: {name}</div>
      </div>
    );
  }
}

export default App;

这是sandbox

我想我应该在状态中添加额外的值并保留我的名字直到更改，如果我按 ESC 我可以显示它。我什至尝试过但失败了。

小伙伴们有遇到类似的问题吗？或者你以前在 SO 上看到过类似的东西吗？我发现了一些清除输入值的情况，但我觉得没用。

请提供帮助。

Answer 1

我会做的是让您想要恢复的文本保持原样。单击输入时，将 revertValue 的值设置为 this.state.name。单击 esc 时，将 this.state.name 设置为 revertValue。工作样本：https://codesandbox.io/s/competent-lumiere-ubq68?file=/src/App.js

如何在 React 中放弃输入按 ESC 的更改？

How to discard changes on Input pressing ESC in React?

input

keycode

reactjs