Question

我目前正在处理使用Formik在React中的预订表格。我还分别结合了Ant Design的Date Picker和Time Picker分别用于预订日期和时间，但是我很难将值传递回组件。

这是我在表单组件中进行设置的方式（我省略了其他不相关的字段）：

const { booking, handleSubmit, mode } = this.props;

...

<Formik
    initialValues={booking}
    onSubmit={handleSubmit}
    render={({errors, touched, isSubmitting}) => (
        <Form>
        ...
<div className="form-group col-sm-4 col-md-6 col-lg-4">
    <label htmlFor="booking_date">
        Booking Date <span className="required">*</span>
    </label>
    <DatePicker onChange={ (date, dateString) => setFieldValue('booking_date', dateString)} defaultValue={this.state.bookingDate}
        className="form-control" format={this.state.dateFormat} />
</div>
<div className="form-group col-sm-4 col-md-6 col-lg-4">
    <label htmlFor="start_time">
        Start Time <span className="required">*</span>
    </label>
    <TimePicker
        defaultValue={this.state.startTime}
        format={this.state.timeFormat}
        className="form-control"
        onChange={this.handleStartTimeChange}
        minuteStep={5}
        id="start_time"
        name="start_time"
    />
</div>

这是处理时间变化（仅设置状态）的函数：

handleStartTimeChange(time) {
    this.setState({
        startTime: time
    });
}

然后在父级上，组件设置如下：

<BookingForm
    show={true}
    booking={null}
    handleSubmit={this.saveBooking.bind(this)}
    mode="add"
/>

saveBooking函数只需通过控制台将参数注销。但是，它只会注销其他字段，例如firstname，surname和email。日期被完全忽略了，我不知道如何获取表单来识别它们-我什至尝试创建一个Formik隐藏字段来在提交时复制日期值，但仍然忽略它。字段名称和ID正确，并且与其他所有数据库都相关联，因此我不明白为什么它不读取该数据？

Answer 1

简单地说，您需要在Formik Form.Item的{{1}}道具中利用Ant Design的Field。

您也可以添加其他Antd表单项，但是有一些怪癖。因此，我只建议使用其中一个（而不是两个）。

工作示例：https://codesandbox.io/s/4x47oznvvx

components / AntFields.js （创建两个不同的component函数的原因是，其中一个ant组件传递了onChange（event）而另一个传递回event.target.value-不幸的是，将value与Formik一起使用时会出现古怪之处

Antd

components / FieldFormats.js

import map from "lodash/map";
import React from "react";
import { DatePicker, Form, Input, TimePicker, Select } from "antd";

const FormItem = Form.Item;
const { Option } = Select;

const CreateAntField = Component => ({
  field,
  form,
  hasFeedback,
  label,
  selectOptions,
  submitCount,
  type,
  ...props
}) => {
  const touched = form.touched[field.name];
  const submitted = submitCount > 0;
  const hasError = form.errors[field.name];
  const submittedError = hasError && submitted;
  const touchedError = hasError && touched;
  const onInputChange = ({ target: { value } }) =>
    form.setFieldValue(field.name, value);
  const onChange = value => form.setFieldValue(field.name, value);
  const onBlur = () => form.setFieldTouched(field.name, true);
  return (
    <div className="field-container">
      <FormItem
        label={label}
        hasFeedback={
          (hasFeedback && submitted) || (hasFeedback && touched) ? true : false
        }
        help={submittedError || touchedError ? hasError : false}
        validateStatus={submittedError || touchedError ? "error" : "success"}
      >
        <Component
          {...field}
          {...props}
          onBlur={onBlur}
          onChange={type ? onInputChange : onChange}
        >
          {selectOptions &&
            map(selectOptions, name => <Option key={name}>{name}</Option>)}
        </Component>
      </FormItem>
    </div>
  );
};

export const AntSelect = CreateAntField(Select);
export const AntDatePicker = CreateAntField(DatePicker);
export const AntInput = CreateAntField(Input);
export const AntTimePicker = CreateAntField(TimePicker);

components / ValidateFields.js

export const dateFormat = "MM-DD-YYYY";
export const timeFormat = "HH:mm";

components / RenderBookingForm.js

import moment from "moment";
import { dateFormat } from "./FieldFormats";

export const validateDate = value => {
  let errors;

  if (!value) {
    errors = "Required!";
  } else if (
    moment(value).format(dateFormat) < moment(Date.now()).format(dateFormat)
  ) {
    errors = "Invalid date!";
  }

  return errors;
};

export const validateEmail = value => {
  let errors;

  if (!value) {
    errors = "Required!";
  } else if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
    errors = "Invalid email address!";
  }

  return errors;
};

export const isRequired = value => (!value ? "Required!" : "");

components / BookingForm.js

import React from "react";
import { Form, Field } from "formik";
import { AntDatePicker, AntInput, AntSelect, AntTimePicker } from "./AntFields";
import { dateFormat, timeFormat } from "./FieldFormats";
import { validateDate, validateEmail, isRequired } from "./ValidateFields";

export default ({ handleSubmit, values, submitCount }) => (
  <Form className="form-container" onSubmit={handleSubmit}>
    <Field
      component={AntInput}
      name="email"
      type="email"
      label="Email"
      validate={validateEmail}
      submitCount={submitCount}
      hasFeedback
    />
    <Field
      component={AntDatePicker}
      name="bookingDate"
      label="Booking Date"
      defaultValue={values.bookingDate}
      format={dateFormat}
      validate={validateDate}
      submitCount={submitCount}
      hasFeedback
    />
    <Field
      component={AntTimePicker}
      name="bookingTime"
      label="Booking Time"
      defaultValue={values.bookingTime}
      format={timeFormat}
      hourStep={1}
      minuteStep={5}
      validate={isRequired}
      submitCount={submitCount}
      hasFeedback
    />
    <Field
      component={AntSelect}
      name="bookingClient"
      label="Client"
      defaultValue={values.bookingClient}
      selectOptions={values.selectOptions}
      validate={isRequired}
      submitCount={submitCount}
      tokenSeparators={[","]}
      style={{ width: 200 }}
      hasFeedback
    />
    <div className="submit-container">
      <button className="ant-btn ant-btn-primary" type="submit">
        Submit
      </button>
    </div>
  </Form>
);

Answer 2

我不明白为什么它不会读取这些数据？

Formik将值作为values传递，它们使用setFieldValue进行更新。 在状态中存储值时，Formik对其一无所知。

当然，将值存储到状态并没有错（假设它可以正常工作），但是您必须定义内部提交处理程序以将这些值附加到其他状态。通过简单的调用道具：

onSubmit={handleSubmit}

您没有机会这样做。将仅传递Formik处理的值。您需要定义内部提交处理程序，例如：

const handleSubmit = values => {
  // init with other Formik fields
  let preparedValues = { ...values }; 

  // values from state
  const { startTime, startDate } = this.state; 

  // attach directly or format with moment
  preparedValues["startTime"] = startTime;
  preparedValues["startDate"] = startDate;

  // of course w/o formatting it can be done shorter
  // let preparedValues = { ...values, ...this.state }; 

  console.log(preparedValues);

  // call external handler with all values
  this.prop.handleSubmit( preparedValues );
}

蚂蚁设计日期和时间选择器不会通过Formik传递值（反应）

2 个答案: