React
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: 'Bob' };
},
changeName: function(newName) {
this.setState({
name: newName
});
},
render: function () {
return (
<Child
name={this.state.name}
onChange={this.changeName}
/>
);
}
});
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
Child.js
var React = require('react');
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.onChange(name);
},
render: function () {
return (
<div>
<h1> Hey my name is {this.props.name}!</h1>
<select id="selector" onChange={this.handleChange}>
<option value="Bob">Bob</option>
(etc.)
</select>
</div>
);
}
});
module.exports = Child;
jQuery
$('#selector').change( () => {
$('.name-span').text( $('option:selected').text() );
});