React event handlers not binding properly - meteor

Question

I am building a React app with Semantic UI in Meteor. I have had two places where event handlers don't seem to be functioning in any capacity, and I haven't found anything online with a problem to the same extent.
Below is my React class. I have tried various ways of calling the eventHandler methods, but nothing works. That also seems irrelevant since I can't even get an anonymous function to run.
SaveSearchPopout = React.createClass({
getInitialState: function() {
return {username: "", queryname: ""};
},
handleUsernameChange:function(e) {
console.log(e.target.value);
this.setState({username: e.target.value})
},
handleQuerynameChange:function(e) {
this.setState({queryname: e.target.value})
},
handleSave:function(e) {
console.log("handling save");console.log(e);
e.preventDefault();
alert("saving!");
return false;
},
render: function() {
console.log(this);
return (
<div className="ui modal saveSearchPopout">
<div className="header">Save Search</div>
<div className="content">
<form className="ui form" onSubmit={function() {console.log("test");}}>
<div className="field">
<input type="text" name="username"
placeholder="Username"
value={this.state.username}
onChange={function() {console.log("update")}} />
</div>
<div className="field">
<input type="text" name="queryname"
placeholder="Name this search"
value={this.state.queryname}
onChange={this.handleQuerynameChange}></input>
</div>
<div className="actions">
<div className="ui cancel button">Cancel</div>
</div>
<button type="submit">Click</button>
<button className="ui button" type="button"
onClick={function() {console.log("saving");}}>Save</button>
</form>
</div>
</div>
);
}
});
The class is rendered from another classes method which looks like:
saveSearch: function() {
var backingDiv = document.createElement('div');
backingDiv.id = 'shadowPopupBack';
document.getElementsByClassName('content-container')[0].appendChild(backingDiv);
ReactDOM.render(<SaveSearchPopout />, backingDiv);
//this.props.saveSearch;
$('.ui.modal.saveSearchPopout')
.modal({
closeable:false,
onDeny: function() {
var container = document.getElementsByClassName('content-container')[0];
var modalContainer = document.getElementById('shadowPopupBack');
container.removeChild(modalContainer);
}
})
.modal('show');
},
The only button that works is the Semantic UI cancel button.
Has anyone else run into this or have any idea what I am missing. Thanks for the help.

Answer 1

Don't know if this is the case, but in newer versions of React (or JSX), when you pass a function to an HTML component or a custom component, that function is not automatically bound to this instance.
You must bind them manually. For example:
onChange={this.handleQuerynameChange.bind(this)}
Or you could use arrow functions, because they will automatically bind to this:
onChange={e => this.handleQuerynameChange(e)}

Answer 2

I eventually found the answer here. Semantic UI modal component onClose with React
and I haven't worked through it yet, but it looks like this is more Reactive solution than using jQuery to bind eventHandlers: http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps.
Hope this is helpful to someone else.