Как мне создать компонент формы Formik и yup, который имеет 3 входа, но отображается на 1 значение yup?

Question

Как мне в основном создать эту https://design -system.service.gov.uk / Patterns / даты / в Formik с проверкой YUP.

, поэтому 3 поля day, month и year создадут слияние с одним {date: [moment]}, которое будет проверено 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>
    );
  }
};