"React Antd 無法從自定義日期選擇器中獲取價值"

Question

我目前正在使用自定義日期選擇器以“MMDD”或“MMDDYY”格式輸入日期，並將值設置為狀態並在日期選擇器組件中用作受控組件。 但是在提交表單時，日期選擇器的值是未定義的。

請在代碼框中找到代碼，並糾正我在此代碼中做錯了什么。

https:\/\/codesandbox.io\/s\/damp-haze-mmj80<\/a>

Answer 1

只需要添加一個componentDidMount循環：

componentDidMount = () => {
  this.props.onChange(this.state.value.format('YYYY-MM-DD'));
};

handleOnChange = date => {
  if (!!date) {
    this.setState({ value: date });
    this.props.onChange(date.format('YYYY-MM-DD'));
  }
};

Answer 2

我沒有使用過那個庫 (antd)，但是查看了它的文檔，使用那個 fieldDecorator 向組件添加了兩個屬性——onChange 和 value。

  {getFieldDecorator("date-picker")(<CustomDatePicker />)}

所以現在想象 CustomDatePicker 有這兩個屬性。 Value 將是表單項的值，並且 onChange 期望作為表單輸入的 onChange 處理程序被調用。

但是，在您的 CustomDatePicker 組件中，您沒有對其中任何一個進行任何操作。 相反，您正在本地跟蹤具有本地狀態的組件的值（並使用處理程序更新它）。

相反，您應該使用這兩個屬性：

 class CustomDatePicker extends React.Component {
  state = {
    isOpen: false
  };

  render() {
    return (
      <DatePicker
        value={this.props.value}
        format={this.state.isOpen ? ["MMDD", "MMDDYY"] : "MM/DD/YY"}
        placeholder=" -- Select Date --"
        disabledDate={d => d && d > moment(Date.now())}
        onOpenChange={status => {
          this.setState({ isOpen: status });
        }}
        onChange={this.props.onChange}
      />
    );
  }
}

如果您想執行任何初始值邏輯或驗證，您將在表單級組件中執行此操作——控制狀態的組件。

Answer 3

這就是 React Hooks 對我有用的方法，希望它會有所幫助。

const initialInfo = {email: "", registrationDate: ""}
const [infoData, setInfoData] = useState(initialInfo);