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).

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index cd8062959ec67cab269d4e95db44c3167f0e49e2..84a35a5eab96f71fd37336ce6f4bcef37312a85b 100644 (file)
--- 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">