Question

我想在我的UI上显示用户从日期时间选择器中选择的日期和时间。我的代码如下 -

import React from 'react';
import '../App.css';
import Datetime from 'react-datetime';

class Datetimepicker extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        moveaside: false,
        feed_items: [],
        newText: new Date(),
    };
    this.updateState = this.updateState.bind(this);
    this.showValuee = this.showValuee.bind(this);
}
updateState(e) {
    const text = e.value;
    console.log("text", text);
    this.setState({ newText: text });
    this.showValuee();
}
showValuee() {
    console.log(this.state.newText);
}
render() {
    console.log(this.props.value);
    return (
        <Datetime className={this.props.show ? 'rdt' : 'hide'} onChange={this.updateState} defaultValue={this.state.newText} />
    )
 }
}
export default Datetimepicker;

＆＃39;文本＆＃39;显示未定义的值。我正在导入这个＆＃39; Datetimepicker＆＃39;我父组件中的组件和我使用的日期时间选择器是 - （https://github.com/YouCanBookMe/react-datetime）

Answer 1

您使用的反应日期时间选择器的文档以编程方式使用onChange函数，并且不会将更改event转发回用户。相反，onChange内的参数是时刻日期对象本身。

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datetime: ''
    }
    this.updateState = this.updateState.bind(this);
  }
  updateState(date) {
    // This function gives you the moment object of date selected. 
    console.log(date);
  }
  render() {
    return (
      <Datetime onChange={this.updateState}/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<link rel="stylesheet" type="text/css" href="https://rawgit.com/arqex/react-datetime/master/css/react-datetime.css"/>

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.js"></script>
<script src="https://rawgit.com/arqex/react-datetime/master/dist/react-datetime.js"></script>

＆＃13;

您应该查看的其他内容是如何使用setState回调。因为setState是异步的，所以不能使用函数来记录状态值。

显示在react-datetime选择器中选择的日期

1 个答案: