React-Time-Range 仅显示默认开始时间答案

【问题标题】：React-Time-Range Only Shows Default Start TimeReact-Time-Range 仅显示默认开始时间
【发布时间】：2020-04-22 01:50:51
【问题描述】：

我使用 React-Time-Range 组件创建了一个表单，用于记录宴会厅预订。出于某种原因，记录的开始时间始终默认为我在 state 中列出的 moment() 值。

您能看看我下面的代码，以帮助确定为什么它没有改变，即使用户选择了不同的值？

组件：

import moment from 'moment';
import TimeRange from 'react-time-range';

class Navbar extends Component {
 constructor(props){
 super(props)
 this.state = {
  startTime: moment(),
  endTime: moment()
}
}

returnFunctionStart = event => {
    this.setState({ startTime: event.startTime })
    };

  returnFunctionEnd = event => {
    this.setState({ endTime: event.endTime })
    };

render () {
return (
    <TimeRange
        onStartTimeChange={this.returnFunctionStart.bind(this)}
        onEndTimeChange={this.returnFunctionEnd}
        startMoment={this.state.startTime}
        endMoment={this.state.endTime}
    />
);
}

结束时间运行良好。谢谢。

【问题讨论】：

所以当改变开始时间时它没有反映是这个问题吗？
刚刚测试，它按预期工作。你在哪里面临问题？谢谢！
DILEEP -- 完全正确...它反映在 UI 中，但是当我尝试检索 sendgrid 电子邮件的值时，会出现默认值。很奇怪。

标签： javascript reactjs momentjs

【解决方案1】：

上面的代码工作正常，如果你使用的是最新版本的 react 你可以清理一些代码，如下所示

你可以避免

绑定read more here
构造函数，因为 babel 会处理它read more here

import React, {
  Component
} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import moment from "moment";
import TimeRange from "react-time-range";

class Navbar extends Component {
  state = {
    startTime: moment(),
    endTime: moment()
  };

  returnFunctionStart = event => {
    this.setState({
      startTime: event.startTime
    });
  };

  returnFunctionEnd = event => {
    this.setState({
      endTime: event.endTime
    });
  };

  render() {
    return ( <
      TimeRange onStartTimeChange = {
        this.returnFunctionStart
      }
      onEndTimeChange = {
        this.returnFunctionEnd
      }
      startMoment = {
        this.state.startTime
      }
      endMoment = {
        this.state.endTime
      }
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render( < Navbar / > , rootElement);

工作codesandbox

【讨论】：