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

Answer 1

我只想从文本区域中删除 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')
);