Как сделать так, чтобы react различал input'ы и состояние отдельного input'a менялось только если в его поле что-то вводится?

Question

[Артем Андреев]

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

[Aves]

Проще всего так:

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

Comments

[Артем Андреев]

Не работает

state = {
valueA: 0,
valueB: 0
};

пишет что тут ошибка вроде