Как получить дату (значение) из 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>
    )
   }
 }

Answer 1

Предполагая, что остальная часть вашего кода работает должным образом, при отправке формы она будет в вашем состоянии, поэтому получите ее оттуда:

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

Answer 2

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

вам нужно убедиться, что имя в формах datePicker соответствует имени в вашем штате. Так что, если ваше состояние

this.state = {
   date: new Date();
}

Тогда в поле ввода также должна быть указана дата.

 <input
                    name="date"
                    id="date"
                    type="date"
                    defaultValue="2017-05-24"
                    onChange={handleInputChange}
                    value={inputs.date}
                />

Метод, который я опубликовал, позволяет использовать его для любого компонента формы. Просто убедитесь, что вы совпадаете с именем ввода формы и состоянием, которое вы используете.