下载Marked后，freeCodeCamp的Markdown预览器编辑器无法正常工作

问题核心原因 #

你遇到的两个问题（state始终停留在预设文本、输入时光标跳底），大概率是**handleChange方法的this指向错误**导致的：

• 若未正确绑定this，this.setState无法访问组件实例的state，自然无法更新markdown值
• 因为state没更新，编辑器的value始终被强制设为预设文本，每次输入后组件重渲染时，光标就会跳到底部

修复方案 #

1. 修正handleChange的this绑定

有两种可靠方式：

• 在组件构造函数中手动绑定：

  constructor(props) {
    super(props);
    this.state = { markdown: '预设占位文本' };
    // 关键：绑定this指向组件实例
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({ markdown: event.target.value });
  }
  

• 改用箭头函数定义方法（自动绑定this）：

  handleChange = (event) => {
    this.setState({ markdown: event.target.value });
  }
  

2. 确保编辑器是受控组件

检查编辑器的value属性是否严格绑定到state：

<textarea 
  value={this.state.markdown}
  onChange={this.handleChange}
  // 其他属性...
/>

额外排查点 #

如果修复后仍有问题，检查：

• 是否在render过程中意外修改了this.state.markdown的值
• Marked库的使用逻辑是否干扰了组件渲染（比如在render中执行了会改变state的操作）

内容的提问来源于stack exchange，提问作者Harry Smith