使用 react-dateTime 组件的值设置状态

Question

我需要帮助。我正在使用一个 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 未定义，所以根本没有事件，我还尝试通过在 onChange[=13= 上调用事件来初始化处理程序]

谢谢

Answer 1

它不像常规 input 那样通过 name

获取其值

onChange: Callback trigger when the date changes. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string). Docs

试试这个：

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 or react-date-picker

使用 react-dateTime 组件的值设置状态

Setting state with the value of a react-dateTime component

reactjs

datetime

material-ui

react-datetime