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}
                />

我发布的方法允许您将其重新用于任何表单组件。只要确保您与表单输入名称和使用状态相匹配即可。

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

2 个答案: