Image - onclick event in React JS

Question

I am using this library - datetimepicker_css.js in my html/jquery code. Whenever I click on the image, a time format like mm:dd:yyyy hh:mm:ss populates in input tag.

 Start time:<input type="text" id="demo1" maxlength="25" size="25" name="stime" />                                                                                                                        
 <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer"/>

I am trying to implement same in react js code, and facing issues doing so. I could populate start_time but couldn't do a onclick of image tag and replace in the start_time field. Any help/suggestion on this is highly appreciated.

  render() {
        return (
                <form onSubmit={this.handleSubmit}>
                    <input value={this.state.first_name} onChange={this.setFirstName} placeholder="First name"/>
                    <input value={this.state.last_name} onChange={this.setLastName} placeholder="Last name"/>
                    <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/>
                    <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)"/>
                    <button type="submit">Submit</button>
                </form>

        )
    }

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

@KishoreBarik Got this error : I am not sure how to use Image event as function. Uncaught Error: Invariant Violation: Expected onClick listener to be a function, instead got type string — Goutam
– Goutam, Commented Mar 11, 2016 at 12:05
ok now your onClick event is getting triggered. Now the error you are getting because the function you provided as string where it should be a function. you can bind a function of the component which will call NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true) — Kishore Barik
– Kishore Barik, Commented Mar 11, 2016 at 12:10

Kishore Barik · Accepted Answer · 2016-03-11 12:16:08Z

4

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

        )
    },
populateDate(){
   NewCssCal('demo1','yyyyMMdd','dropdown',true,'24',true);

},

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

Note: make sure your NewCssCal function is globally available

answered Mar 11, 2016 at 12:16

Kishore Barik

7603 silver badges17 bronze badges

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

6 Comments

Goutam Over a year ago

This works. But when i try to setState the input tag, I face an error . <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/> <img src="images2/cal.gif" onClick={this.populateDate}/> setStartTime(event) { this.setState({start_time: event.target.value}); }, populateDate(event){ NewCssCal('demo1','yyyyMMdd','dropdown',true,'24',true); this.setState({start_time: event.target.value}); },

Goutam Over a year ago

Error in the sense, I am changing the state of input tag value after the image click event. This needs to be updated as the target.value of input field but its not! Its still showing the previous value ( default ) of the input field. Does this not work? populateDate(event){ NewCssCal('demo1','yyyyMMdd','dropdown',true,'24',true); setStartTime(event); },

Kishore Barik Over a year ago

have a look on jsfiddle.net/KishoreBarik/xrnbb63m/1 it's working there. if it's still not working for you remove value={this.state.start_time} from demo1 input and check

Goutam Over a year ago

This is my code : jsfiddle.net/adwantgoutam/cfthcqLk/2 I tried it all, but no luck.

Kishore Barik Over a year ago

your fiddle is not even running. Have you forked reacjs properly? I can't test there

|

Collectives™ on Stack Overflow

Image - onclick event in React JS

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related