onKeyUp 在 React 中不起作用，而 onChange 起作用了

Question

我正在做一个 React 编码挑战，需要在 KeyUp 上更新一个值。我最初将其设置为更新 onChange 但测试需要 onKeyUp 所以我试图将其更改为那个，但我的字段不再更新并且我无法在文本区域中键入任何内容。

 class MarkdownApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleKeyUp(event) {
    this.setState({ value: event.target.value })
  }

  render() {
    return (
      <form>
        <label>
          Enter your markdown here:
          <br />
          <textarea value={this.state.value} onKeyUp={this.handleKeyUp} id='editor' />
          <br />
        </label>
        <label>
          Your markup will be previewed here:
          <p id='preview'>{marked(this.state.value)}</p>
        </label>
      </form>
    );
  }
}

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

就像我说的，当它是 onChange 并且我的函数是 handleChange 时它工作得很好，但是因为我切换它我不能输入任何东西。

原文由 Cdhippen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于事件发生在文本框的实际值更改之前， event.target.value 的结果是一个空字符串。使用空字符串设置状态，清除文本框。

您需要从事件中获取按下的键值，并将其添加到现有的 state.value 。

注意：我已经从演示中删除了 marked

 class MarkdownApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleKeyUp(event) {
    const keyValue = event.key;

    this.setState(({ value }) => ({
      value: value + keyValue
    }))
  }

  render() {
    return (
      <form>
        <label>
          Enter your markdown here:
          <br />
          <textarea value={this.state.value} onKeyUp={this.handleKeyUp} id='editor' />
          <br />
        </label>
        <label>
          Your markup will be previewed here:
          <p id='preview'>{this.state.value}</p>
        </label>
      </form>
    );
  }
}

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

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

原文由 Ori Drori 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我只想从文本区域中删除 value 属性。因为如果您将 value 属性放入其中，那么用户将无法以交互方式更改它。该值将始终保持固定（除非您明确更改代码中的值）。你不需要用 React 来控制它——DOM 会为你保存值。

我在下面所做的唯一更改是从 textarea 元素中删除 value={this.state.value} ：

 import React from 'react';
import ReactDOM from 'react-dom';

class MarkdownApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleKeyUp(event) {
    this.setState({ value: event.target.value })
  }

  render() {
    return (
      <form>
        <label>
          Enter your markdown here:
          <br />
          <textarea value={this.state.value} onKeyUp={this.handleKeyUp} id='editor' />
          <br />
        </label>
        <label>
          Your markup will be previewed here:
          <p id='preview'>{this.state.value}</p>
        </label>
      </form>
    );
  }
}

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

原文由 duhaime 发布，翻译遵循 CC BY-SA 4.0 许可协议