ReactJS onChange function not firing on entering input

Question

I have refactored a form with React hooks and useState, but I can't fire the function handleChange which is provided to onChange of input tags. Here is the code: The useState method

const [data, setData] = useState({
    newDate: '',
    startTime: '',
    endTime: '',
});

const { newDate, startTime, endTime } = data;

The handleInputChange method

const handleInputChange = (e) => {
    console.log('Inside handleChange');
    setData({ ...data, [e.target.name]: e.target.value });
};

The inputs in the form

<input type="text" name="newDate" value={newDate} className="datepicker"
placeholder="Meeting Date" onChange={handleInputChange} />

<input style={{ width: '40%', marginRight: '10%' }} type="text" required
name="startTime" value={startTime} placeholder="00:00" onChange={handleInputChange}
className="timepicker" placeholder="Start Time" />

The onSubmit method and everything apart from this is working, but the input onChange method isn't firing. What exactly am i doing wrong here and how do I fix it?

Can you make a reproducible example in a snippet or something? Right off I'm not seeing the issue — Brian Thompson
– Brian Thompson, Commented Jun 15, 2020 at 20:12
Ok, so I finally figured out that it was because of the input type text and className datepicker and timepicker of materialize css which I was using, I changed it to normal date input and time input and it works just fine. — Utkarsh Kumar
– Utkarsh Kumar, Commented Jun 16, 2020 at 11:23

godblessstrawberry · Accepted Answer · 2021-07-14 09:36:19Z

4

In my case it was global handler attached to window with e.preventDefault() that was preventing onChange.

So if you come here with non-working onChange handler - you might want to check if there's any.

answered Jul 14, 2021 at 9:36

godblessstrawberry

5,1484 gold badges45 silver badges71 bronze badges

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

4 Comments

Kebsu Over a year ago

Thank you! That was exactly my issue! Likely quite rare, would take me a while. :D

S.Alvi Over a year ago

Perfect! Worked for me. Have an upvote buddy!

Jason R Stevens CFA Over a year ago

I had a parent component with this in an event-based handler and was causing all child inputs to exhibit the OP's described behavior.

Matthias Over a year ago

omg thank you, that was it i added a onKeyDown, preventDefault on the parent div for another feature, that was the problem

Juan Marco · Accepted Answer · 2020-06-15 20:41:23Z

The code seems ok, you're using controlled components along with computed property names to dynamically update each input value. Perhaps there's a typo somewhere? Also, I would double check that handleInputChange is inside the main function component.

Working example based on your code:

function App() {
  const [data, setData] = React.useState({
    newDate: "",
    startTime: "",
    endTime: ""
  });

  const handleInputChange = e => {
    setData({ ...data, [e.target.name]: e.target.value });
  };
  const { newDate, startTime, endTime } = data;
  return (
    <div>
      <input
        style={styles.input}
        type="date"
        name="newDate"
        value={newDate}
        className="datepicker"
        onChange={handleInputChange}
      />

      <input
        style={styles.input}
        type="time"
        required
        name="startTime"
        value={startTime}
        onChange={handleInputChange}
        className="timepicker"
      />

      <input
        style={styles.input}
        type="time"
        required
        name="endTime"
        value={endTime}
        onChange={handleInputChange}
        className="timepicker"
      />
      {JSON.stringify(data)}
    </div>
  );
}

const styles = {
  input: {
    margin: "20px auto",
    width: "40%",
    display: "block",
  }
};

ReactDOM.render(<App/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Note: I added specific <input> types based on the data you're collecting.

Thanks for the example, I figured out it was probably because of the input type text and className of timepicker and datepicker in materialize css which was breaking the flow somehow.

octaviandd · Accepted Answer · 2020-06-15 20:19:40Z

-1

<input type="text" name="newDate" value={newDate} className="datepicker"
placeholder="Meeting Date" onChange={(e) => handleInputChange(e)} />

weird, try this.

answered Jun 15, 2020 at 20:19

octaviandd

1792 silver badges19 bronze badges

Collectives™ on Stack Overflow

ReactJS onChange function not firing on entering input

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related