(React.js form field)Cannot type in text field after I used bind onChange in constructor

Question

thanks for taking time to look at my code, I am using React.js to create a search bar, everything works fine until I try to bind inputChange inside the constructor. Once onInputChange is bind in the constructor I cannot type in the form text field. I try console.log and it shows that the event key strokes are captured but nothing show up in the text input field.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchWeather } from '../actions/index';

    class SearchBar extends Component {
        constructor(props) {
            super(props);
            this.state = { term: '' }; 

            this.onInputChange = this.onInputChange.bind(this); *(if I comment out onInputChange bind statement then I can type in the form field) 

            this.onFormSubmit = this.onFormSubmit.bind(this);
        }

        onInputChange(event) {
            console.log(event.target.value);
            this.setState = ({ term: event.target.value }); 
        }

        onFormSubmit(event) {
            event.preventDefault();
            this.props.fetchWeather(this.state.term);
            this.setState({ term: '' });
        } 

        render() {
            return (    
            <form onSubmit={this.onFormSubmit} className="input-group">
                <input type="text" 
                    placeholder="Five day forcast for your favorite cities" 
                    className="form-control" 
                    value={this.state.term} 
                    onChange={this.onInputChange} /> *(tried this.onInputChange.bind(this) but same thing happened)

                <span className="input-group-btn">
                    <button type="submit" className="btn btn-   secondary">Submit</button>
                </span>
            </form>
            );
        }
    }

    function mapDispatchToProps(dispatch) {
        return bindActionCreators({ fetchWeather }, dispatch);
    }

    export default connect(null, mapDispatchToProps)(SearchBar);

Tien Do · Accepted Answer · 2016-11-29 01:51:38Z

1

Why do you assign an object to setState method? Then this.term is never changed.

onInputChange(event) {
  console.log(event.target.value);
  this.setState({ term: event.target.value }); // <-- fixed it
}

answered Nov 29, 2016 at 1:51

Tien Do

11.1k7 gold badges44 silver badges42 bronze badges

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

1 Comment

Anthony Liang Over a year ago

Thank you very much!!! it works! it is a silly mistake but I've spent hours banging my head against the wall without catching it. Again, I really appreciate your help.

Collectives™ on Stack Overflow

(React.js form field)Cannot type in text field after I used bind onChange in constructor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related