1
Ich implementiere einen Markdown Previewer von Freecodecamp, aber ich habe ein Problem. Das onChange-Ereignis in der Eingabekomponente wird nicht ausgelöst und ich kann nicht herausfinden warum!React JS onChange Event wird nicht ausgelöst
Irgendwelche Ideen?
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>
Omg danke Ihnen danken! Das war eigentlich ziemlich einfach. Danke noch einmal! – coffeeak
Nachdem ich einige Dokumentationen von Facebook ReactJS gelesen hatte, fand ich über Lifting State Up: https://facebook.github.io/react/docs/lifting-state-up.html. Es könnte für andere nützlich sein, die das gleiche Problem haben, das ich hatte. – coffeeak