How to make react distinguish between inputs and the state of a separate input changes only if something is entered in its field?

Question

JavaScript

const InitStateInputs = {
    total: 0,
    valueA: 0,
    valueB: 0
  };

    var Calc = React.createClass({

      getInitialState: function() {
        return {
          initInputs: InitStateInputs
        }
      },
      handleChange: function(e) {

       this.setState({value : e.target.value});
      }
      ,
      render: function() {
        return (
          <div>
          <input type="text" onChange={this.handleChange} value={this.state.initInputs.valueA}/>
          <input type="text" onChange={this.handleChange} value={this.state.initInputs.valueB} />
          </div>

        )
      }
    })

    ReactDOM.render(
      <Calc />,
      document.getElementById('calc')
    )

Answer 1

It's easiest like this:

class Calc extends React.Component {
  state = {
    valueA: 0,
    valueB: 0
  };
  handleChange = ({target: {name, value}}) => {
    if (name) this.setState({[name]: value});
  };
  render() {
    return (
      <div onChange={this.handleChange}>
        <input type='text' name='valueA' value={this.state.valueA}/>
        <input type='text' name='valueB' value={this.state.valueB} />
      </div>
    );
  }
}

JS Bin