Question

我在我的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"/>

我正在尝试在反应js代码中实现相同的功能，并且面临着这样做的问题。我可以填充start_time但是无法在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="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});
    },

Answer 1

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

注意：确保 NewCssCal 功能全局可用

图像 - React JS中的onclick事件

1 个答案: