title: Reactjs form calculation data working only for inputs
body: <p>Am trying to perform realtime calculations for form inputs, checkbox, select etc via <strong>Reactjs</strong>.</p>
  
  <p>A good example of what am trying to implement can be found in this <strong>fiddle</strong></p>
  
  <p><a href="https://jsfiddle.net/flamedenise/fpovk96p/" rel="nofollow noreferrer">https://jsfiddle.net/flamedenise/fpovk96p/</a> </p>
  
  <p>The Code below works fine only for form input real-time data entry calculation.
   My problem is that the select and checkbox
  is not working when their corresponding values are selected or checked respectively. can someone help me fix that</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  &lt;script src="build/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/browser.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;label id="rootsearch"&gt;&lt;/label&gt;
      &lt;script type="text/babel"&gt;
  
  class NameForm extends React.Component {
    constructor(props) {
      super(props);
   this.state = {value: '', first: '', second: '', third: '', fourth: ''};
  
  this.handleChange = this.handleChange.bind(this);
  this.handleChange1 = this.handleChange1.bind(this);
  this.onKeyPressed = this.onKeyPressed.bind(this);
    }
  
  
  
     handleChange1(e) {
        this.setState({ [e.target.name]: e.target.value });
     }
  
   handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }
  
  onKeyPressed(e) {
    console.log(e.key);
  //alert('you click me');
  //var first = parseFloat(this.state.first);
  
  // convert it to a float
  var first = Number(this.state.first);
  var second = Number(this.state.second);
  var third = Number(this.state.third);
  var fourth = Number(this.state.fourth);
  var total_expenses = first + second + third + fourth;
  
  this.setState({
  total_expenses_due: total_expenses,
  });
  
  }
  
    componentDidMount() {
    }
  
  
  
  
  render() {
      return (
        &lt;span&gt;
          &lt;label&gt;
  &lt;select  onKeyUp={(e) =&gt; this.onKeyPressed(e)}  value={this.state.first}  onChange={this.handleChange1}&gt;
              &lt;option value=""&gt;-select-&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
              &lt;option value="20"&gt;20&lt;/option&gt;
  
            &lt;/select&gt;&lt;br /&gt;
  
  
  
  
  &lt;input type="checkbox" onKeyUp={(e) =&gt; this.onKeyPressed(e)}  value={this.state.second} onChange={this.handleChange1} name="second"   placeholder="Plane Ticket..." /&gt; 20 &lt;br /&gt;
  
  &lt;input  onKeyUp={(e) =&gt; this.onKeyPressed(e)} value={this.state.third} onChange={this.handleChange1} name="third" placeholder="Hotel Expenses..."  /&gt;&lt;br /&gt;
  &lt;input  onKeyUp={(e) =&gt; this.onKeyPressed(e)} value={this.state.fourth} onChange={this.handleChange1} name="fourth" placeholder="Eating Expenses..." /&gt;&lt;br /&gt;
  &lt;br /&gt;&lt;br /&gt;
  Total: {this.state.total_expenses_due}
  &lt;br /&gt;
  Total: &lt;input  type="text" value={this.state.total_expenses_due} onChange={this.handleChange1} placeholder="Total Expenses..."/&gt;
  
  
  
  
                  &lt;/label&gt;
  
        &lt;/span&gt;
     );    
  }
  
  
  
  }
  ReactDOM.render(
    &lt;NameForm /&gt;,
    document.getElementById('rootsearch')
  );
  
  
   &lt;/script&gt;
  
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>