From a1ed0fc881f3bfe6cc55041fda3b54f7c0baa94b Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 7 Jun 2020 15:22:28 -0700
Subject: [PATCH] Add a submit handler function for our form

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).
---
 empathy/empathy.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index cd80629..84a35a5 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -125,6 +125,19 @@ async function fetch_put_json(api = '', data = {}) {
 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);
   }
 
   render() {
@@ -136,7 +149,7 @@ class CategoryRequest extends React.Component {
           include the number of items for each person to submit.
         </p>
 
-        <form>
+        <form onSubmit={this.handle_submit} >
           <div className="form-field large">
             <input
               type="text"
@@ -144,8 +157,8 @@ class CategoryRequest extends React.Component {
               placeholder="6 things at the beach"
               required pattern=".*[0-9]+.*"
               title="Category must contain a number"
-              >
-            </input>
+              ref={this.category}
+            />
           </div>
 
           <div className="form-field large">
-- 
2.43.0