This is still a stub that doesn't actually _do_ aything yet.
Note that we're using the "uncontrolled components" React pattern for
the input field here as described here:
https://reactjs.org/docs/uncontrolled-components.html
The alternative, forcing a new call to React's setState on every
keypress seems really silly to me, (I don't care to have React getting
involved on every keypress).
class CategoryRequest extends React.Component {
constructor(props) {
super(props);
class CategoryRequest extends React.Component {
constructor(props) {
super(props);
+ this.category = React.createRef();
+
+ this.handle_submit = this.handle_submit.bind(this);
+ }
+
+ handle_submit(event) {
+ const category_input = this.category.current;
+ const category = category_input.value;
+
+ /* Prevent the default page-changing form-submission behavior. */
+ event.preventDefault();
+
+ console.log("Do something here with category: " + category);
include the number of items for each person to submit.
</p>
include the number of items for each person to submit.
</p>
+ <form onSubmit={this.handle_submit} >
<div className="form-field large">
<input
type="text"
<div className="form-field large">
<input
type="text"
placeholder="6 things at the beach"
required pattern=".*[0-9]+.*"
title="Category must contain a number"
placeholder="6 things at the beach"
required pattern=".*[0-9]+.*"
title="Category must contain a number"
+ ref={this.category}
+ />
</div>
<div className="form-field large">
</div>
<div className="form-field large">