63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import './task-form.css';
|
|
|
|
|
|
export class TaskForm extends Component {
|
|
static propTypes = {
|
|
handleSubmit: PropTypes.func.isRequired
|
|
};
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
|
|
this.state = {title: ''};
|
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.handleKeyUp = this.handleKeyUp.bind(this);
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
clearInput() {
|
|
this.setState({title: ''});
|
|
}
|
|
|
|
handleChange(event) {
|
|
this.setState({title: event.target.value});
|
|
}
|
|
|
|
handleKeyUp(event) {
|
|
if (event.keyCode === 27) this.clearInput();
|
|
}
|
|
|
|
handleSubmit(event) {
|
|
event.preventDefault();
|
|
const title = this.state.title.trim();
|
|
if (title.length) this.props.handleSubmit(title);
|
|
this.clearInput();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<form className="task-form" onSubmit={this.handleSubmit} noValidate>
|
|
<input
|
|
autoComplete="off"
|
|
autoFocus
|
|
className="task-form__input"
|
|
maxLength="64"
|
|
onChange={this.handleChange}
|
|
onKeyUp={this.handleKeyUp}
|
|
placeholder="What needs to be done?"
|
|
ref={e => this.titleInput = e}
|
|
type="text"
|
|
value={this.state.title}
|
|
/>
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
export default TaskForm;
|