0

我正在使用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>
    )
   }
 }
4

2 回答 2

1

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

const pick = {
      date: this.state.startDate, 
      color: this.color.value,
     description: this.description.value
    }
于 2019-06-05T11:45:29.577 回答
0 
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}
                />

我发布的方法允许您将其重用于任何表单组件。只需确保您匹配表单输入名称和您正在使用的状态。

于 2019-06-05T13:21:35.440 回答