удалить то, что внутри ввода, нажав клавишу на клавише Reactjs - PullRequest
Новая
       5

удалить то, что внутри ввода, нажав клавишу на клавише Reactjs

0 голосов
/ 16 апреля 2020

когда я пытаюсь удалить то, что находится внутри ввода, как только я нажимаю указанную клавишу c, в этом случае это буква "t" с onKeyDown, ввод будет очищен, но нажатая клавиша останется внутри например, на входе: когда я наберу «сортировать» на входе, результат будет «т». «t» останется внутри входного значения, но я хочу, чтобы входное значение было очищено, хотя я устанавливаю состояние «term» как «», когда нажимаю букву «t» 

  state = { term: ""};

  keyListener = (e) => {
    if (e.key === "t") {
      this.setState({ term: "" });
    }
  };

  onInputChange = (event) => {
    this.setState({ term: event.target.value });
  };

  render() {
    return (
      <div className="search-bar ui segment">
        <form className="ui form">
          <div className="field">
            <label>Search Video</label>
            <input
              type="text"
              value={this.state.term}
              onChange={this.onInputChange}
              onKeyDown={this.keyListener}
            />
          </div>
        </form>
      </div>
    );
  }

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Это происходит потому, что onInputChange будет вызываться следующим, просто вызовите e.preventDefault, чтобы предотвратить это: 

keyListener = (e) => {
    if (e.key === "t") {
      this.setState({ term: "" });
      e.preventDefault();
    }
  };
0 голосов
/ 16 апреля 2020

вы можете использовать неконтролируемый ввод с привязкой ссылки, удалить обработчик onChange и оставить onKeyDown. Вы можете получить значение, используя ref 

  state = { term: ""};
  this.input = React.createRef();

  keyListener = (e) => {
    if (e.key === "t") {
      this.setState({ term: "" });
    }
  };

  render() {
    return (
      <div className="search-bar ui segment">
        <form className="ui form">
          <div className="field">
            <label>Search Video</label>
            <input
              type="text"
              ref={this.input}
              onKeyDown={this.keyListener}
            />
          </div>
        </form>
      </div>
    );
  }
...