CODEWITHSUNDEEP
javascriptphpjqueryreactjs
Goutam
Goutam

Reputation: 1367

React JS - unable to update text after IMG onclick event

I am trying to update the input text field ( Start time ) after the onClick={this.populateDate}. But I get the default value passed to the AJAX call to PHP.

https://jsfiddle.net/adwantgoutam/rg68Lyfk/

<?php header('Access-Control-Allow-Origin: *');

echo "Hello World";
$stime= $_GET['first_name'];
$etime= $_GET['last_name'];
$xyz= $_GET['start_time'];
echo "\n";
echo $stime;
echo "\n";
echo $etime;
echo "\n";
echo $xyz;
?>

Output : Hello world! John Doe 03/11/2016 ( not the updated one after we click date through image onclick ).

   var Hello = React.createClass({
    render() {
    return (
             <form onSubmit={this.handleSubmit}>
                <input value={this.state.first_name} onChange={this.setFirstName} placeholder="First name"/><br/>
                <input value={this.state.last_name} onChange={this.setLastName} placeholder="Last name"/><br/>
                <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/>
                <img src="https://rainforestnet.com/datetimepicker/sample/images2/cal.gif" onClick={this.populateDate}/><br/>
                <button type="submit">Submit</button>
            </form>

    )
},
     handleSubmit(event) {
        event.preventDefault();
        var data = this.state;
        $.ajax({
            type: "GET",
            crossDomain: true,
            url: "http://localhost:8082/PFT/login.php",
            data: data,
            success: function(data){
                alert(data);
                //$('#resultip').html(data);
            },
            error:function(data)
            {
                alert("Data sending failed");
            }
        });
    },
  populateDate(){
    NewCssCal('demo1','yyyyMMdd','dropdown',true,'24',true);

  },

getInitialState() {
    return {
        first_name: "John",
        last_name: "Doe",
        start_time: "03/11/2016",
    };
},         
   setStartTime(event) {
      console.log( event.target.value)
        this.setState({start_time: event.target.value});
     }
  });

   ReactDOM.render(
     <Hello />,
     document.getElementById('container')
 );

I have attached my code in jsfiddle and above is the PHP script. I am not sure where exactly or how to process this. Any help is highly appreciated. Thanks.

Upvotes: 1

Views: 186

Answers (1)

Kishore Barik
Kishore Barik

Reputation: 770

I have gone through the date picker library you are using. To make this code work you'll have to add componentDidMount as follows.

componentDidMount(){
    document.getElementById('demo1').onchange= this.setStartTime;
}

Then you need to modify you setStartTime function as follows

setStartTime() {
        this.setState({start_time: document.getElementById('demo1').value});
}

Because the library is triggering change event programatically(as the value is being changed programmatically). Hence you'll not get the event object.

Though doing so will make your code work, my suggestion will be to use any react library for date-time picker(if you don't have the dependency to use this only) which provide proper configuration as per your requirement. Also try to use refs instead of document.getElement.... which is the react way of interacting with dom.

Upvotes: 1

Related Questions