javascript - 如何从 DatePicker 获取日期（值）并将其分配给对象的属性？

Question

我正在使用react-datepicker图书馆。如何从DatePicker组件中提取值并将其分配给对象date中的属性Pick。从输入中下载数据很简单。如何用数据选择器做到这一点？

class Form extends Component {
  constructor(){
    super();
    this.state = {
      startDate: new Date()
    }
  }

  create(event) {
    event.preventDefault();

    const pick = {
      date: this.date.value, /
      color: this.color.value,
     description: this.description.value
    }

   this.form.reset();
  }

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

  render() {

    return (
      <form ref={(input) => this.form= input} onSubmit={(e) => 
          this.create(e)}>
      <div>
          {/*<input ref={(input) => this.date = input} type="text" 
          />*/}
       <DatePicker
        dateFormat="yyyy/MM/dd"
        selected={this.state.startDate}
        onChange={this.handleChange} 
      />
      <input ref={(input) => this.time = input} type="text" />
    </div>

       <textarea ref={(input) => this.description = input} 
     placeholder="" ></textarea>

       <div >
         <button >Cancel</button>
         <button type="submit">Save</button>
       </div>
     </form>
    )
   }
 }

标签： javascriptreactjsecmascript-6datepicker

Answer 1

假设您的其余代码按预期运行，提交表单时它将处于您的状态，因此从那里获取它：

const pick = {
      date: this.state.startDate, 
      color: this.color.value,
     description: this.description.value
    }