1

请我需要帮助。我正在使用 react-dateTime 组件，我只是想获取该组件的值，就像表单中的所有其他字段一样。但是我无法获得所选日期的值，更不用说将其存储在具有其他字段其他属性的状态中。

这是我的代码：

日期时间组件

  <Datetime
    onChange={this.handleChange}
    value={startDate}
    timeFormat={true}
    name="startDate"
    inputProps={{ placeholder: "Start Date" }}
   />

事件处理程序

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

第二个 onchange 处理程序

 handleSelectDate = event => {
    if (event.target.name === "startDate") {
      this.setState({ startDate: event.target.value});
    } else {
      this.setState({ endDate: event.target.value });
    }
  }```

The state object

 this.state= { startDate: '' }

我尝试了不同的方法，目前我收到一个错误，即 event.target 未定义，所以根本没有事件，我还尝试通过调用 event onChange 来初始化处理程序

谢谢

4

1 回答 1

1

它不像普通的那样工作input来获得它的价值name

onChange：日期变化时的回调触发。如果输入中的日期有效，则回调接收选定的时刻对象作为唯一参数。如果输入中的日期无效，则回调接收输入的值（字符串）。文档

尝试这个：

class App extends React.Component {

  state = {
    startDate: ""
  }
  // You need to bind "this"
  handleChange = this.handleChange.bind(this)

  // Receives the selected "moment" object as only parameter
  handleChange(date) {
    this.setState({ startDate: date })
  }

  render() {
    return (
      <div>
        <Datetime
          value={this.state.startDate}
          onChange={this.handleChange}
          timeFormat={true}
          inputProps={{ placeholder: "Start Date" }}
        />
        <hr />
        Select date:{" "}
        {this.state.startDate ? this.state.startDate.toString() : "no selected date"}
      </div>
    )
  }
}

检查此codeSandbox示例。

虽然它有效，但它有点过时了，我鼓励你检查react-datetime-picker或react-date-picker

于 2020-01-13T08:09:16.647 回答