javascript - DatePicker编辑时不显示input中的日期

Question

//设置新日期

this.state.startDate = new Date("July 27, 1962 23:30:00")
const date = new Date(this.state.startDate);

//设置时间

date.setHours(0, 0, this.state.second);
date.toTimeString();

当我点击 edit 时。我希望这个日期显示在输入中。并且它可以被编辑

图片:https://imgur.com/OjBEC5u

此处示例:https://stackblitz.com/edit/react-cuubsx

编辑

class Edit extends React.Component {
  render() {
    return (
        <DatePicker
          selected={this.props.startDate}
          onChange={this.props.handleChange}
        />
    )
  }
}

项目

class Item extends Component {

  state = {
    startDate: new Date("July 27, 1962 23:30:00"),
    second: 120
  }

  handleChange = (date) => {
    this.setState({
      startDate: date
    });
  }


  render() {

    const date = new Date(this.state.startDate);
    console.log(date)
    date.setHours(0, 0, this.state.second);
    date.toTimeString();

    return (
         <Edit
            handleChange={this.handleChange}
            startDate={date}
            handleDescription={this.handleDescription}
            date = {this.date} 
          />

    )
  }
}

Answer 1

您的代码有 2 个问题。当您使用 customInput 时，您没有指定onChange 处理程序，因此选择日期不会更新任何内容。所以添加一个 onChange 处理程序:

<input onClick={this.props.onClick} onChange={this.props.onChange}
className="dateInput" value={this.props.value} type="text" />

并且您将 this.date 作为 prop 传递给 EditForm，它应该是 date。由于 this.date 未定义，您输入的日期始终为空。

<EditForm
    handleChange={this.handleChange}
    description={this.state.description}
    startDate={date}
    handleDescription={this.handleDescription}
    onSave={this.onSave}
    onCancel={this.onCancel}
    date={date}
/>

结果在这个stackblitz .