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功能的textarea成分MarkDownInput，所以它永远不会被调用。

更改此：

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

要这样：

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