Removed internal state from several input components (aces#2433)

* Removed internal state from several input components

These components were duplicating/mirroring state when they could simply
use props. This change gives us a single source of truth for state and
is more in line with React best practices.

* Only show input errors for requried fields when empty string is passed

* Update form elements used in media

* Pass values to form elements

Author: jacobpenny

htdocs/js/components/Form.js

@@ -164,7 +164,7 @@ var SelectElement = React.createClass({
       name: '',
       options: {},
       label: '',
-      value: null,
+      value: undefined,
       id: '',
       class: '',
       multiple: false,
@@ -178,32 +178,10 @@ var SelectElement = React.createClass({
       }
     };
   },
-  componentDidMount: function componentDidMount() {
-    if (this.props.value) {
-      this.setState({
-        value: this.props.value
-      });
-    }
-  },
-  componentWillReceiveProps: function componentWillReceiveProps() {
-    if (this.props.hasError) {
-      this.setState({
-        hasError: this.props.hasError
-      });
-    }
-  },
-  getInitialState: function getInitialState() {
-    var value = this.props.multiple ? [] : '';
-    return {
-      value: value,
-      hasError: false
-    };
-  },
+
   handleChange: function handleChange(e) {
     var value = e.target.value;
     var options = e.target.options;
-    var hasError = false;
-    var isEmpty = value === "";
 
     // Multiple values
     if (this.props.multiple && options.length > 1) {
@@ -213,19 +191,8 @@ var SelectElement = React.createClass({
           value.push(options[i].value);
         }
       }
-      isEmpty = value.length > 1;
     }
 
-    // Check for errors
-    if (this.props.required && isEmpty) {
-      hasError = true;
-    }
-
-    this.setState({
-      value: value,
-      hasError: hasError
-    });
-
     this.props.onUserInput(this.props.name, value);
   },
   render: function render() {
@@ -253,7 +220,7 @@ var SelectElement = React.createClass({
     }
 
     // Add error message
-    if (this.state.hasError) {
+    if (this.props.hasError || this.props.required && this.props.value === "") {
       errorMessage = React.createElement(
         'span',
         null,
@@ -281,7 +248,7 @@ var SelectElement = React.createClass({
             multiple: multiple,
             className: 'form-control',
             id: this.props.label,
-            value: this.state.value,
+            value: this.props.value,
             onChange: this.handleChange,
             required: required,
             disabled: disabled
@@ -332,20 +299,7 @@ var TextareaElement = React.createClass({
       }
     };
   },
-  getInitialState: function getInitialState() {
-    return {
-      value: ''
-    };
-  },
-  componentDidMount: function componentDidMount() {
-    if (this.props.value) {
-      this.setState({ value: this.props.value });
-    }
-  },
   handleChange: function handleChange(e) {
-    this.setState({
-      value: e.target.value
-    });
     this.props.onUserInput(this.props.name, e.target.value);
   },
   render: function render() {
@@ -380,7 +334,7 @@ var TextareaElement = React.createClass({
           className: 'form-control',
           name: this.props.name,
           id: this.props.id,
-          value: this.state.value,
+          value: this.props.value,
           required: required,
           disabled: disabled,
           onChange: this.handleChange
@@ -406,11 +360,6 @@ var TextboxElement = React.createClass({
     required: React.PropTypes.bool,
     onUserInput: React.PropTypes.func
   },
-  getInitialState: function getInitialState() {
-    return {
-      value: ''
-    };
-  },
   getDefaultProps: function getDefaultProps() {
     return {
       name: '',
@@ -424,17 +373,7 @@ var TextboxElement = React.createClass({
       }
     };
   },
-  componentDidMount: function componentDidMount() {
-    if (this.props.value) {
-      this.setState({
-        value: this.props.value
-      });
-    }
-  },
   handleChange: function handleChange(e) {
-    this.setState({
-      value: e.target.value
-    });
     this.props.onUserInput(this.props.name, e.target.value);
   },
   render: function render() {
@@ -468,7 +407,7 @@ var TextboxElement = React.createClass({
           className: 'form-control',
           name: this.props.name,
           id: this.props.id,
-          value: this.state.value,
+          value: this.props.value,
           required: required,
           disabled: disabled,
           onChange: this.handleChange
@@ -509,20 +448,7 @@ var DateElement = React.createClass({
       }
     };
   },
-  getInitialState: function getInitialState() {
-    return {
-      value: ''
-    };
-  },
-  componentDidMount: function componentDidMount() {
-    if (this.props.value) {
-      this.setState({ value: this.props.value });
-    }
-  },
   handleChange: function handleChange(e) {
-    this.setState({
-      value: e.target.value
-    });
     this.props.onUserInput(this.props.name, e.target.value);
   },
   render: function render() {
@@ -559,7 +485,7 @@ var DateElement = React.createClass({
           min: this.props.minYear,
           max: this.props.maxYear,
           onChange: this.handleChange,
-          value: this.state.value,
+          value: this.props.value,
           required: required,
           disabled: disabled
         })
@@ -586,11 +512,6 @@ var NumericElement = React.createClass({
     required: React.PropTypes.bool,
     onUserInput: React.PropTypes.func
   },
-  getInitialState: function getInitialState() {
-    return {
-      value: ''
-    };
-  },
   getDefaultProps: function getDefaultProps() {
     return {
       name: '',
@@ -606,17 +527,7 @@ var NumericElement = React.createClass({
       }
     };
   },
-  componentDidMount: function componentDidMount() {
-    if (this.props.value) {
-      this.setState({
-        value: this.props.value
-      });
-    }
-  },
   handleChange: function handleChange(e) {
-    this.setState({
-      value: e.target.value
-    });
     this.props.onUserInput(this.props.name, e.target.value);
   },
   render: function render() {
@@ -970,9 +881,6 @@ var ButtonElement = React.createClass({
     type: React.PropTypes.string,
     onUserInput: React.PropTypes.func
   },
-  getInitialState: function getInitialState() {
-    return {};
-  },
   getDefaultProps: function getDefaultProps() {
     return {
       label: 'Submit',