javascript - React JS-IMG onclick事件后无法更新文本

原文 标签 javascript php jquery reactjs

我正在尝试在onClick = {this.populateDate}之后更新输入文本字段(“开始时间”)。但是我得到了传递给PHP的AJAX调用的默认值。

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;
?>


输出:
你好,世界!
约翰
母鹿
2016年3月11日(而不是通过图片点击日期单击日期后的更新版本)。

   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')
 );


我已经在jsfiddle中附加了我的代码,上面是PHP脚本。我不确定确切的位置或处理方式。非常感谢您的帮助。谢谢。

最佳答案

我已经遍历了您正在使用的日期选择器库。要使此代码正常工作,您必须按如下所示添加componentDidMount。

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


然后您需要如下修改setStartTime函数

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


因为库正在以编程方式触发更改事件(因为正在以编程方式更改值)。因此,您将不会获得事件对象。

尽管这样做可以使您的代码正常工作,但我的建议是将任何react库用于日期时间选择器(如果您不具有仅使用它的依赖项),它可以根据您的要求提供适当的配置。还尝试使用refs代替document.getElement ....,这是与dom交互的反应方式。

关于javascript - React JS-IMG onclick事件后无法更新文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35950311/

相关文章:

javascript - 单击单选按钮时显示文本框

php - 如何在mySQL中调用PHP变量?

php - 如何使用 PHP 执行 Apache 子请​​求?

javascript - 如何选择保存<a>的<tr>并更改颜色

javascript - 想要在一行jquery代码中更改css的2个或更多属性,我该怎么做?

javascript - 如何检测对象变量是否已更改?

javascript - AngularJS上的自动空值

javascript - 如何让熔岩滴伤害 Angular 色?

php - PHP“Crypt_Blowfish”类启动错误?

javascript - 检索数据-jQuery中的属性-错误