"React Antd 无法从自定义日期选择器中获取价值"

Question

I am currently using custom datepicker to enter date in the format 'MMDD' or 'MMDDYY' and setting the value in state and using in the datepicker component as controlled component. But on submit of form the datepicker value is undefined.

Answer 1

Only had to add a componentDidMount cycle:

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

I've not used that library (antd), but looking at the docs for it, using that fieldDecorator adds two properties to the component -- onChange and value.

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

So now imagine CustomDatePicker has those two properties. Value will be the value of the form item, and onChange is expecting to be called as the onChange handler of a form input.

However, in your CustomDatePicker component you aren't doing anything with either of those. Instead, you're tracking the value (and updating it with a handler) locally to that component with local state.

Instead, you should use those two properties:

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

If you want to do any initial value logic, or validation, you'll do that at the form-level component -- the one that is controlling the state.

Answer 3

This is what works for me with React Hooks, hope it will help.

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