Блог

Главная - Вопросы по программированию - Как отменить изменения при вводе, нажав ESC в React?

Как отменить изменения при вводе, нажав ESC в React?

#reactjs #input #keycode

#reactjs #ввод #код ключа

Вопрос:

Я пытаюсь создать ввод, значение которого сохраняется в состоянии. Когда я что-то пишу и нажимаю 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;

И это песочница

Я думаю, мне следует добавить дополнительное значение в состояние и сохранить свое имя до изменений, и если я нажму ESC, я смогу отобразить это. Я даже пытался это сделать, но потерпел неудачу.

У вас, ребята, есть похожая проблема? Или, может быть, вы видели на SO что-то подобное раньше? Я нашел несколько случаев, которые очищают входное значение, но имо это бесполезно.

Пожалуйста, о вашей помощи.

Комментарии:

1. Требуется некоторая дополнительная информация о том, когда вы хотите создать момент времени текста, к которому нужно вернуться. Является ли значение для привязки к предварительно заполненному форме? Вы хотите, чтобы пользователь мог ввести «Foo», удалить текст и ввести «Bar», затем решить, что им на самом деле не нужен «Bar», в конце концов, и нажать escape, чтобы вернуться к «Foo»?

2. @callmeywan Значение предварительно заполняется формой. Я точно хочу получить то же самое, что вы написали.

Ответ №1:

Что я бы сделал, так это сохранил текст, к которому вы хотите вернуться, в состоянии. При нажатии на ввод установите значение revertValue равным this.state.name . Когда вы нажмете клавишу esc, установите this.state.name чтобы вернуть значение. Рабочий пример: https://codesandbox.io/s/competent-lumiere-ubq68?file=/src/App.js