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

输出：你好，世界！约翰母鹿 2016年11月3日（我们点击图片点击日期后更新的那个）。

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

因为库以编程方式触发更改事件（因为值以编程方式更改）。因此，您将无法获得事件对象。

虽然这样做会使你的代码工作，但我的建议是将任何反应库用于日期时间选择器（如果你不具有使用它的依赖性），根据你的要求提供适当的配置。还尝试使用 refs 而不是document.getElement ....这是与dom交互的反应方式。

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

1 个答案: