React JS-IMG onclick事件后无法更新文本 [英] React JS - unable to update text after IMG onclick event

问题描述

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

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

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

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

我已经在jsfiddle中附加了我的代码，上面是PHP脚本.我不确定确切在哪里或如何处理.任何帮助都将受到高度赞赏.谢谢.

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.

推荐答案

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

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

然后您需要按如下所示修改 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.

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

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.

这篇关于React JS-IMG onclick事件后无法更新文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！