React- change input value causes error

Question

I have problem with changing value of input during onChange,

 handleChange(event){
    this.setState({
      value: event.target.value
    });
  }

  render(){
    return(
      <div className={s.root}>
        <div className={s.container}>
          <label className={s.captionLabel}>{this.props.caption}</label>
          <input className={this.props.modal? s.modalTextInput : s.textInput} onChange={this.handleChange} value={this.state.value} ref="inp" disabled={!this.state.isChecked} type="text" />
          <label className={s.unitLabel}>{this.props.unit}</label>
          <input className={s.boxInput} type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange.bind(this)}/>
        </div>
      </div>
    )
  }

I am still getting error message

Uncaught TypeError: Cannot read property 'setState' of undefined

I tried onChange={this.handleChange.bind(this} , after this I didn't receive this error message but I couldn't change value of input. In extract of event.target.value I am getting value like a 1,01,02 and so on.... but value don't change anymore (I just cant overwrite value in input ). So any tips what I have to do?

How does you constructor look? It should call super, bind you change handler and set this.state to some initial value. — Scarysize
– Scarysize, Commented Jul 27, 2016 at 5:38
If you use es6 class method for the component, you'll have to manually bind this. Regarding input value, if you console log this.state.value on render and type something on your input, what value will be logged ? — Tushar Khatiwada
– Tushar Khatiwada, Commented Jul 27, 2016 at 5:41
@Tushar Khatiwada When i have manually bind this, i cant overwrite input. so my render dont run. I have default zero values in my inputs , and i just cant delete them or overwrite. @Scarysize In constructor i have super(props), value: '0' and this.handleChange=this.handleChange.bind(this) — Lukáš Unzeitig
– Lukáš Unzeitig, Commented Jul 27, 2016 at 5:50
@LukášUnzeitig Try this: In your handleChange(event) comment this.setState and write console.log(event). Type in anything and see what logs in your debugger console. — Tushar Khatiwada
– Tushar Khatiwada, Commented Jul 27, 2016 at 5:58
@TusharKhatiwada its a long message :D - Object { dispatchConfig: Object, _targetInst: Object, nativeEvent: input, type: "change", target: <input.Inputs_modalTextInput_2d6>, currentTarget: <input.Inputs_modalTextInput_2d6>, eventPhase: 3, bubbles: true, cancelable: false, timeStamp: 1469599236447, 6 and next… } what exactly am i looking for? — Lukáš Unzeitig
– Lukáš Unzeitig, Commented Jul 27, 2016 at 6:02

Serhii Baraniuk · Accepted Answer · 2016-07-27 06:09:48Z

1

Just bind your function in constructor method

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 0 }
    
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({
      value: event.target.value
    });
  }

  render(){
    return(
      <div>
        <div>
          <h1>Current value: {this.state.value}</h1>
          <label>{this.props.caption}</label>
          <input onChange={this.handleChange} value={this.state.value} ref="inp" type="text" />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Example name="World" />, document.getElementById('app'));

<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>
<div id="app" />

edited Jul 27, 2016 at 6:09

answered Jul 27, 2016 at 6:03

Serhii Baraniuk

3,3752 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lukáš Unzeitig Over a year ago

already have, although without error, but now with no possibility of value change

Lukáš Unzeitig Over a year ago

have it !!! :D My function shouldComponentUpdate blocked this re-render... however thanks a lot.

Lukáš Unzeitig · Accepted Answer · 2016-07-27 06:12:07Z

exactly my code looks like -

class Input extends React.Component {
  constructor(props){
    super(props);
    this.state= {
      isChecked: true,
      value: '0'
    };
    this.handleChange= this.handleChange.bind(this);

  };

  shouldComponentUpdate(nextProps){
    return this.props.inputValue != nextProps.inputValue;
  }

  componentWillReceiveProps(nextProps){
    console.log('inputWillReciveProps',nextProps.inputValue);
    this.setState({
      value: nextProps.inputValue
    })
  }

  handleChange(event){
    console.log(event);/*
    this.setState({
      value: event.target.value
    });*/
  }

  render(){
    console.log('Inputrender',this.props.inputValue);
    return(
      <div className={s.root}>
        <div className={s.container}>
          <label className={s.captionLabel}>{this.props.caption}</label>
          <input className={this.props.modal? s.modalTextInput : s.textInput} onChange={this.handleChange} value={this.state.value} ref="inp" disabled={!this.state.isChecked} type="text" />
          <label className={s.unitLabel}>{this.props.unit}</label>
          <input className={s.boxInput} type="checkbox" checked={this.state.isChecked} onChange={this.toggleChange.bind(this)}/>
        </div>
      </div>
    )
  }

  toggleChange(){
    this.setState({
      isChecked: !this.state.isChecked
    })
  }
}

shouldComponentUpdate looks not very good. Remove this function

Collectives™ on Stack Overflow

React- change input value causes error

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related