Javascript Image-React JS中的onclick事件

我在html/jquery代码中使用了这个库-datetimepicker_css.js。每当我单击图像时，输入标记中就会填充一个时间格式，如mm:dd:yyyy hh:mm:ss

 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"/>   

开始时间：

我正试图在react js代码中实现同样的功能，但在这样做时遇到了一些问题。我可以填充开始时间，但不能在开始时间字段中单击图像标记并替换。非常感谢您在这方面提供的任何帮助/建议

  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});
    },                                                                     

render（）{
返回(
提交
)
}
getInitialState（）{
返回{
名字：“约翰”，
姓氏：“Doe”，
开始时间：“2016年11月3日”，
};
},         
设置开始时间（事件）{
this.setState（{start_time:event.target.value}）；
},                                                                     

render（）{
返回(
提交
)
},
人口（）{
NewCssCal（'demo1'，'yyyyMMdd'，'dropdown'，true'，'24'，true）；
},
getInitialState（）{
返回{
名字：“约翰”，
姓氏：“Doe”，
开始时间：“2016年11月3日”，
};
},         
设置开始时间（事件）{
this.setState（{start_time:event.target.value}）；
},

---

注意：确保您的NewCssCal函数在全球范围内可用

图像的html是什么？@KishoreBarik编辑了图像中的编码更改

onclick

到

onclick

tag@KishoreBarik出现此错误：我不确定如何使用图像事件作为函数。未捕获错误：不变冲突：预期onClick侦听器是一个函数，而不是获取类型stringok。现在触发onClick事件。现在，您得到的错误是因为您提供的函数是字符串，它应该是函数。您可以绑定组件的函数，该函数将调用

NewCssCal（'demo1'，'yyyyMMdd'，'dropdown'，true，'24'，true）

。但是当我试图设置输入标记时，我会遇到一个错误。setStartTime（event）{this.setState（{start_time:event.target.value}）}，populateDate（event）{NewCssCal（'demo1'，'yyyyymmdd'，'dropdown'，true，'24'，true）；this.setState（{start_time:event.target.value}）}，从某种意义上说，我正在更改图像单击事件后输入标记值的状态。这需要更新为输入字段的target.value，但不是！它仍然显示输入字段的上一个值（默认值）。这不管用吗？populateDate（事件）{NewCssCal（'demo1'，'yyyyymmdd'，'dropdown'，true，'24'，true）；setStartTime（事件）；}，看看它在那里工作。如果它仍然不适用于您，请从demo1输入中删除

value={this.state.start_time}

，并检查这是我的代码：我尝试了所有操作，但没有成功。您的小提琴甚至没有运行。你用叉子叉好了吗？我不能在那里测试

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});
    },