React onChange is not firing

Question

I have the following code:

handleChange(event, module) {
    this.state[module][event.target.name] = event.target.value
    this.forceUpdate();
}

render() {
    const handleChange = (event, module) => {
        this.handleChange(event, module);
    }    
    return (
        <form ref="steps" action="#" className="wizard-big" id="paymentForm">
            <FormGroup>
                <ControlLabel htmlFor="bank_account_agency">Agência</ControlLabel>
                <FormControl name="bank_account_agency" id="bank_account_agency" type="text" value={this.state.bank.bank_account_agency} onChange={(event) => handleChange(event, "bank")} required />
            </FormGroup>

            <FormGroup>
                <ControlLabel htmlFor="bank_account_number">Conta</ControlLabel>
                <FormControl name="bank_account_number" id="bank_account_number" type="text" value={this.state.bank.bank_account_number} onChange={(event) => handleChange(event, "bank")} required />
            </FormGroup>
        </form>
  );
}

The onChange is not shot at any input within the form, I tested out of it and everything worked perfectly. I am using the library jQuery Steps and I think that’s the problem, but I can’t find the reason for the mistake.

Answer 1

It is only possible to update the state of React with this.setState you MUST NEVER change this.state directly. Because this.state is how React will know what’s changed or not. You started the component without starting state, so you should use this.setState to set new values.

Answer 2

I like to make methods within a class with fat arrows, then I never need to put the .bind()

You can remove the function within your render()

I put: constructor and variables within the render to show the example, and removed the components of "Bootstrap"

//import React from 'react';

class Formulario extends React.Component 
{
  constructor(props) {
    super(props);
    this.state = { bank: {} };
  }
  //fat arrow functions não precisam de dar o .bind
  handleChange = (event, module) => {   
      this.state[module][event.target.name] = event.target.value;
      this.forceUpdate();
  }

  render() {
      let baa = this.state.bank.bank_account_agency ? this.state.bank.bank_account_agency : null;
      let ban = this.state.bank.bank_account_number ? this.state.bank.bank_account_number : null;
      return (
        <form ref="steps" action="#" className="wizard-big" id="paymentForm">
            <h1>Bank account agency: <span class={"agency"}>{ baa }</span></h1>
            <h1>Bank account number: <span class={"number"}>{ ban }</span></h1>
            <input onChange={(event) => this.handleChange(event, "bank")} name={"bank_account_agency"}/>
            <input onChange={(event) => this.handleChange(event, "bank")} name={"bank_account_number"}/>
        </form>
      );
  }
}

ReactDOM.render(<Formulario/>, document.querySelector(".root"));

<div class="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>