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

Question

我正在尝试在 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;
?>

输出: Hello World ! 约翰 美国能源部 03/11/2016(不是我们通过图像 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 脚本。我不确定具体在哪里或如何处理这个问题。非常感谢任何帮助。谢谢。

Answer 1

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

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

然后您需要修改您的setStartTime函数，如下所示

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

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

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