javascript - 如何创建具有 3 个输入但映射到 1 个 yup 值的 Formik 和 yup 表单组件？

Question

我如何基本上创建这个 https://design-system.service.gov.uk/patterns/dates/在带有 yup 验证的 formik 中。

因此 day、month 和 year 这 3 个字段将合并为一个 {date: [moment]} code> 要由 yup 验证？

Answer 1

我使用了 setFieldValue。

class DatePicker extends React.Component {
  state = {
    day: '',
    month: '',
    year: ''
  };

  updateDateValue = () => {
    const {day, month, year} = this.state;
    const { field } = this.props;
    let momentDate = '';

    if (day && month && year) {
      const date = moment(`${year}-${month}-${day}T00:00:00+0:00Z`, 'YYYY-MM-DD HH:mm:ss Z');

      if (date.isValid()) {
        momentDate = date.utc().format();
      }
    };
    this.props.form.setFieldValue(field.name, momentDate, true);
  };

  handleDayChange = (event) => this.setState({day: event.target.value}, () => this.updateDateValue());
  handleMonthChange = (event) => this.setState({month: event.target.value}, () => this.updateDateValue());
  handleYearChange = (event) => this.setState({year: event.target.value}, () => this.updateDateValue());

  render() {
    const {day, month, year} = this.state;

    return (
      <div>
        <div className="datePicker">
          <input value={day} label="Day" name="day" onChange={this.handleDayChange} />
          <input value={month} label="Month" name="month" onChange={this.handleMonthChange} />
          <input value={year} label="Year" name="year" onChange={this.handleYearChange} />
        </div>
      </div>
    );
  }
};