如何在點擊一個按鈕時立即獲取兩個輸入的值？

以兩個日期輸入（開始日期&結束日期）上的按鈕的單次點擊一次。
默認情況下，它們的值應該是今天的日期，即如果一個輸入保持不變（並且選中一個），然後點擊按鈕，則值應該是用戶選擇的，並且按照默認的今天日期。
輸出應該是yyyy/mm/dd
什麼應該是最React的方法來處理這個問題？

我的方法：

import React, { Component } from 'react'; 
import '../App.css'; 

class DateSelector extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     startDate:"yyyy-MM-dd", 
     endDate:"yyyy-MM-dd" 
    } 
    } 

    dateHandler = (event) => { 
    console.log("startDate: "+this.state.startDate+" endDate:"+this.state.startDate); 
    } 

    startDateOnChange = (event) => { 
    this.setState({startDate: event.target.value}); 
    } 

    endDateOnChange = (event) => { 
    this.setState({endDate: event.target.value}); 
    } 

    render() { 
    return (
     <div> 
     START DATE<input type="date" id="startDate" value="{this.state.startDate}" onChange={this.startDateOnChange}/> 
     END DATE<input type="date" id="endDate" value="{this.state.startDate}" onChange={this.endDateOnChange}/> 
     <button type="submit" onClick={this.dateHandler}>Submit</button> 
     </div> 
    ); 
    } 
} 

export default DateSelector;

上面的代碼給出的日期標籤的onChange事件以下錯誤：

指定的值「{} this.state.startDate」不符合所需的格式「yyyy-MM-dd」。

而且<button>標籤的onClick給空字符串作爲startDate: endDate:

注：我很新的網頁設計的東西。我做了相當的谷歌搜索，但沒有找到任何相關的教程/文檔/帖子。有關這些情況的任何指南/參考（供將來參考），我們對此表示讚賞。

來源

2017-09-14 noobie

要麼控制輸入或得到值使用參考 –

這個答案應該幫助https://stackoverflow.com/questions/44471370/reactjs-why-is-onchange-the-prefered-way-to-handle-input - 改變/ 44471458＃44471458 –

我不認爲你需要使用refs爲此。除非嚴格需要，文檔鼓勵您不要使用引用。 – nbkhope

通過定義各自的value和onChange屬性來控制日期輸入組件。值應該來自組件狀態。 onChange事件後，用新值設置狀態。

添加按鈕組件並在onClick事件處理程序方法中，使用this.state.startDate和this.state.endDate檢查每個輸入的值。如果需要，您可以使用setState相應地調整它們的值。

來源

2017-09-14 17:02:36 nbkhope

如何爲他們設置默認值？我們是否可以像獲得（即event.target.value）的值類似的方式來獲取''標記的值？並且默認值在' onDefault'？ – noobie

如果要在組件安裝時設置默認值，則可以在初始狀態下執行此操作。例如添加一個'構造函數（道具）{超級（道具）; this.state = {startDate：'someInitialValue'，endDate：'someInitialValue'}; }'到你的組件類。 – nbkhope

你建議我可以如何將日期格式設置爲yyyy/mm/dd？ – noobie

如何在點擊一個按鈕時立即獲取兩個輸入的值？

回答

相關問題