React change input value onChange

Question

This is my SearchForm.js, handleKeywordsChange must handle input keywords changes

import React from 'react';
import ReactDOM from 'react-dom';

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       keywords: '',
       city: '',
       date: ''     
      }

      //this.handleChange = this.handleChange.bind(this)
      //this.handleSubmit = this.handleSubmit.bind(this)

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

    handleKeywordsChange(e) {
        console.log(1);

        this.setState({
          value: e.target.value
        });
    }

    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label htmlFor="keywords">Keywords</label>
                    <input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords} />

                  </div>

                  <div className="form-group col-md-5">
                    <label htmlFor="city">City</label>
                    <input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleChange} value={this.state.city} />
                  </div>

                  <div className="form-group col-md-2">
                    <label htmlFor="date">Date</label>
                    <select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                 </div>

                 <div className="form-row">
                     <div className="form-group col-md-12">
                        <input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
                    </div>
                 </div>
            </form>
        )
    }
}

export { SearchForm }

The problem is input keywords doesn't change its value when I'm typing. What's wrong?

Amanshu Kataria · Accepted Answer · 2019-07-25 16:23:17Z

27

Make a common function for changing the state for input values.

handleInputChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
}

Make sure you mention name in every input tag. e.g:

<input name="someUniqueName" value={this.state.someState} onChange={this.handleInputChange} />

edited Jul 25, 2019 at 16:23

answered Mar 19, 2018 at 12:00

Amanshu Kataria

3,4467 gold badges29 silver badges39 bronze badges

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

2 Comments

Ungeheuer Over a year ago

In the object you pass to setState(), why is the key an array with a single value in it? Why not this.setState( { e.target.name: e.target.value} )

Amanshu Kataria Over a year ago

@Ungeheuer the Key is not an array but computed property name.

Camila Loop · Accepted Answer · 2021-05-21 00:21:57Z

18

React Hooks makes this so much easier!!!

import React, {useState} from 'react'

function SearchForm () {
  const [input, setInput] = useState("")
  
  return (
    <div className="SearchForm">
       <input 
           value={input} 
           onChange={(e) => setInput(e.target.value)} />
    </div>
  )

}

edited May 21, 2021 at 0:21

Camila Loop

234 bronze badges

answered Jun 9, 2019 at 22:11

Dat

5,8632 gold badges34 silver badges33 bronze badges

Comments

Sagar Jajoriya · Accepted Answer · 2018-03-19 11:52:15Z

4

It should be :

this.setState({
    keywords: e.target.value
});

answered Mar 19, 2018 at 11:52

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2018-03-19 11:51:48Z

3

Your handleKeywordsChange function sets the state value whereas you are using this.state.keywords as value for input

handleKeywordsChange(e) {
    console.log(1);

    this.setState({
      keywords: e.target.value
    });
}

answered Mar 19, 2018 at 11:51

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Pasham Akhil Kumar Reddy · Accepted Answer · 2021-04-27 11:39:01Z

2

class InputKeywordCheck {
state = {
    email: '',
}

handleInputChange (e) {
    const {name, value } = e.target;
    this.setState({[name]: value});
}

render() {
    return (
        <input name="email" value={this.state.email} onChange={this.handleInputChange} />
    )
} }

answered Apr 27, 2021 at 11:39

Pasham Akhil Kumar Reddy

4575 silver badges9 bronze badges

Comments

Niaz Estefaie · Accepted Answer · 2021-04-27 11:29:14Z

0

I believe that you need to do something like this:

handleKeyWordsChange (e)  {
    this.setState({[e.target.name]: e.target.value});
}

answered Apr 27, 2021 at 11:29

Niaz Estefaie

5871 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

React change input value onChange

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related