javascript - React JS onChange 事件没有被触发

Question

我正在实现 Freecodecamp 的 Markdown 预览器，但我遇到了一些问题。输入组件上的 onChange 事件没有被触发，我不明白为什么!

有什么想法吗？

class MarkDownPreviewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: this.props.text
    };
    
    this.handleChange = this.handleChange.bind(this);
  }
  
   
  handleChange(event) {
    alert("a");
    this.setState({inputText: event.target.value});
  }
  
  render() {
    return (
      <div id="wrapper">
        <MarkDownInput text={this.state.inputText} onChange={this.handleChange}/>
        <MarkDownOutput output={this.state.inputText}/>
      </div>
    );
  }
}

class MarkDownInput extends React.Component {
  render() {
    return (
      <textarea className="input">{this.props.text}</textarea>
    );
  }
}

class MarkDownOutput extends React.Component {
  parseMarkup(rawInput) {
    var rawMarkup = marked(rawInput, {gfm: true, sanitize: true});
    return {__html: rawMarkup};
  }
  
  render() {
    return (
      <div className="output" dangerouslySetInnerHTML={this.parseMarkup(this.props.output)}>
        
      </div>
    );
  }
}

var previewText = '# Heading\n\n ## Sub-heading\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*';

ReactDOM.render(
  <MarkDownPreviewer text={previewText} />, 
  document.getElementById('markpreview')
);

html, body {
  height: 100%;
}

#markpreview {
  height: 100%;
}

#wrapper {
  display:flex;
  height: 100%;
}

.input {
  width: 50%;
  background-color: #e3e3e3;
  margin-right: 10px;
  padding: 10px;
}

.output {
  width: 50%;
  background-color: #f3f3f3;
  white-space: pre;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="markpreview"></div>

Answer 1

您没有将 onChange 函数传递给 MarkDownInput 中的 textarea 组件，因此它永远不会被调用。

改变这个:

<textarea className="input">{this.props.text}</textarea>

对此:

<textarea className="input" onChange={this.props.onChange}>{this.props.text}</textarea>