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

IT技术 javascript php jquery reactjs
2021-05-18 14:30:14

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

输出:你好世界!John Doe 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 脚本。我不确定具体在哪里或如何处理。任何帮助都受到高度赞赏。谢谢。

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方式。