Skip to content

Instantly share code, notes, and snippets.

@tribou
Created October 15, 2015 01:10
Show Gist options
  • Save tribou/1bd0d05fa99da52405e4 to your computer and use it in GitHub Desktop.
Save tribou/1bd0d05fa99da52405e4 to your computer and use it in GitHub Desktop.
A batteries-included React component implemented in ES6
import React from 'react';
import { saveItem } from '../actions/TodoActions.js';
export default class EditTodo extends React.Component {
constructor(props) {
super(props);
this._onChange = this._onChange.bind(this);
this._save = this._save.bind(this);
this._catchEnter = this._catchEnter.bind(this);
this.state = {
text: '',
};
}
_onChange(event) {
this.setState({
text: event.target.value,
});
}
_save() {
saveItem(this.state.text);
}
_catchEnter(event) {
if (event.keyCode === 13) {
this._save();
}
}
render() {
return (
<tr>
<td>
<input
type="text"
value={this.state.text}
onChange={this._onChange}
onKeyDown={this._catchEnter}
placeholder="Add new todo..."
className="form-control"
autoFocus="true"
/>
</td>
<td>
<button type="button"
onClick={this._save}
className="btn btn-link pull-right">
<span
className="glyphicon glyphicon-plus"
aria-hidden="true">
</span>
</button>
</td>
</tr>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment