onKeyUp 不能在 onChange 的 React 中工作

Question

我正在做一个 React 编码挑战，需要更新 onKeyUp 的值。我最初将其设置为更新 onChange，但测试需要 onKeyUp，所以我尝试将其更改为，但我的字段不再更新，我无法在 textarea 中输入任何内容。

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 时，它​​工作得很好，但是因为我切换了它，所以我不能输入任何东西。

Answer 1

我只想从 textarea 中删除 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')
);

Answer 2

由于事件发生在文本框的实际值更改之前，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>

Answer 3

您可以通过不给它value 并简单地将值从ref 存储在状态中来使文本区域不受控制。

示例 (CodeSandbox)

class MarkdownApp extends React.Component {
  ref = null;
  state = {
    value: ""
  };

  handleKeyUp = event => {
    this.setState({ value: this.ref.value });
  };

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

Answer 4

问题是您有两种方式将 state = 绑定到文本框中的值。 OnChange 将在进行更改并且事件完成触发后更新您的状态。 Onkeyup 返回值 onkeyup 并且由于您将其映射到您的状态，它将保持为空。删除 value 道具，它应该可以工作。