React input field doesn't see value changing

Question

When i picking date, event doesn't see anything, nothing happened, i cannot extract my value from input field. What **** ? Is it problem React or Datepicker? In datepicker manual nothing say about that, http://t1m0n.name/air-datepicker/docs/index.html

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dueDate: 'Date and time'
    }
  }

  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker();
  }
  
  render(){
    return (
      <div>
        <h3>Choose date!</h3>
        <input
          value={this.state.dueDate}
          type='text'
          onChange={event => console.log(event)}
          ref='datepicker'
        />
      </div>    
    )
  }
}

ReactDOM.render(
  <MyComponent />,
  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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>

<div id="app"></div>

I would suggest you to use material-ui for React. It works perfectly. — kind user
– kind user, Commented Jul 1, 2017 at 21:09

Nhor · Accepted Answer · 2017-07-01 21:12:53Z

1

You bound the input field value to the state property dueDate. Now if you want to modify it, you have to refresh the state property on input field change, therefore:

onChange={event => this.setState({dueDate: event.target.value})}

answered Jul 1, 2017 at 21:12

Nhor

3,9806 gold badges31 silver badges41 bronze badges

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

Comments

Vasi · Accepted Answer · 2017-07-01 21:18:43Z

1

You wrote a controlled component. You set a state value to input element. If the state changes, your input value change. So you change the code below like,

  // input element
    <input value={this.state.dueDate} onChange={this.handleDueDate}/>

    // handleDueDate method
    handleDueDate(event){
        this.setState({
            dueDate: event.target.value
        })
    }

If you change your code looks like, its works fine.

answered Jul 1, 2017 at 21:18

Vasi

1,2271 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

React input field doesn't see value changing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related