我的 Markdown 预览器中的文本区域未更新

Question

这是我的问题。我一直在开发这个 Markdown 预览器来提高我的 JavaScript 和 React 技能，但我遇到了一个无法解决的问题。我不知道是我盯着它太久还是什么。

一切加载正常，唯一的问题是，当我尝试在文本区域中输入内容时，它不会让我更改其中的任何内容。它没有设置为只读，所以我真的不确定它在做什么。

//Component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markdown: initialMarkdown
    };
    this.handleChange(this.handleChange.bind(this));
  }
  handleChange(event) {
    try {
      this.setState({
        markdown: event.target.value
      });
    } catch (e) {}
  }
  render() {
    return (
      <div>
        <div className="input">
          <div className="header">Editor</div>
          <textarea
            id="editor"
            value={this.state.markdown}
            onChange={this.handleChange}
          ></textarea>
        </div>
        <div className="output">
          <div className="header">Preview</div>
          <div
            id="preview"
            dangerouslySetInnerHTML={{ __html: marked(this.state.markdown) }}
          ></div>
        </div>
      </div>
    );
  }
}

//Rendering to HTML
ReactDOM.render(<App />, document.getElementById("app"));

我已经搜索了一些不同的线程和子版块等等，但我没有找到任何可以解决我的问题的方法。有人有什么想法吗？

Answer 1

handleChange

调用时抛出错误：

TypeError：无法读取未定义的属性（读取“setState”）

问题在于类组件的

this

未正确绑定到回调函数。

在构造函数中进行更改

this.handleChange(this.handleChange.bind(this));

到

this.handleChange = this.handleChange.bind(this);

或将

handleChange

转换为箭头函数

handleChange = (event) => {
  try {
    this.setState({
      markdown: event.target.value
    });
  } catch (e) {
    console.error(e)l
  }
}