Page 52:
With the switch to JavaScript classes, however, we need to bind our methods ourselves.
More recently the use of Property Initializers with arrow functions have come into favour. They are rolled into the Class field declarations for JavaScript proposal and are a candidate for inclusion in ES2019.
// i.e. CreateComment.js aka "module CreateComment"
const initialState = () => ({
content: '',
user: ''
});
class CreateComment extends Component {
constructor(props) {
super(props);
this.state = initialState();
}
handleUserChange = (event) => {
const val = event.target.value;
this.setState(() => ({ user: val }));
};
handleTextChange = (event) => {
const val = event.target.value;
this.setState(() => ({ content: val }));
};
handleSubmit = (event) => {
event.preventDefault();
this.setState(initialState);
};
render() {
return React.createElement(
'form',
{
className: 'createComment',
onSubmit: this.handleSubmit
},
React.createElement( 'input', {
type: 'text',
placeholder: 'Your name',
value: this.state.user,
onChange: this.handleUserChange
}),
React.createElement( 'input', {
type: 'text',
placeHolder: 'Thoughts?',
value: this.state.content,
onChange: this.handleTextChange
}),
React.createElement( 'input', {
type: 'submit',
value: 'Post'
})
);
}
}
CreateComment.propTypes = {
content: PropTypes.string
};
// export default CreateComment;
|