React onChange is not firing

Question

React onChange is not firing

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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>
  );
}

onChange is not fired at any input within form , I tested out of it and everything worked perfectly. I'm using the jQuery Steps library and I think that's the problem, but I can not find the reason for the error.

callback jquery react

asked by anonymous 01.03.2018 / 00:00

2 answers

Error Starting Tomcat Server IONIC Notification error

score 0 · Answer 1

I like to do methods within a class with fat arrows , so I never need to put .bind()

You can remove the function inside your render()

I put: constructor and variables within render to be able to show the example, and I removed the Bootstrap components too

//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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

score 0 · Answer 2

You can only update the React state with this.setState you should NEVER change this.state directly. Well it's with this.state that React will know what has changed or not. You have started the initial no-state component, so you should use this.setState to define new values.