使用Formik生成一个值的多个组件

Question

我有3个<select>组件。在第一部分中，我有几天，第二个月和第三年。这些组件充当一个日期选择器。我试图用Formik的connect包装并使用setFieldValue和setFieldError，但是在我编辑该表单中的其他组件后错误消失了。

如何解决它仍然持久的错误。正如我所看到的，这种行为是known。

class DateField extends Component {
  constructor(props) {
    super(props);
    const value = props.value;
    this.state = {
      day: moment.utc(value).date(),
      month: moment.utc(value).month(),
      year: moment.utc(value).year(),
    };
  }

  handleChange = e => {
    const stateProp = e.target.name.split('.').pop();

    this.setState(
      {
        [stateProp]: e.target.value,
      },
      () => {
        const { formik } = this.props;
        const date = this.dateFromState();
        const error = this.props.validate(date);
        formik.setFieldValue(this.props.name, date, false);
        formik.setFieldError(this.props.name, error);
      }
    );
  };

  handleBlur = () => {
    const { formik } = this.props;
    const date = this.dateFromState();
    const error = this.props.validate(date);
    formik.setFieldTouched(this.props.name, true, false);
    formik.setFieldError(this.props.name, error);
  };

  dateFromState() {
    // returns date constructed from the state
  }

  render() {
    const { formik, name } = this.props;
    const error = getValueByPath(formik.errors, name);

    return (
      <div className="form-group">
        <label>{this.props.label}</label>
        <select
          name={`${this.props.name}.day`}
          value={this.state.day}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
        >
          {
            // options for days
          }
        </select>
        <select
          name={`${this.props.name}.month`}
          value={this.state.month}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
        >
          {
            // options for months
          }
        </select>
        <select
          name={`${this.props.name}.year`}
          value={this.state.year}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
        >
          {
            // options for years
          }
        </select>
        {error && (
          <div className="validation-message">
            <span>{error}</span>
          </div>
        )}
      </div>
    );
  }
}

const getValueByPath = (obj, path) => path.split('.').reduce((o, i) => o && o[i], obj);

export default connect(DateField);

Answer 1

我的建议是将组件与formik分离，让它提供日期并相应地处理更改。然后，您使用它的表单可以确定提供的日期是否有效，并将错误传递给受控组件，直到日期有效为止。这对于可重用性也很有用。

const DatePicker = ({ name, value, error, onChange, onBlur }) => {
  const today = new Date(value);  
  const [day, setDay] = useState(today.getUTCDay());
  const [month, setMonth] = useState(today.getUTCMonth());
  const [year, setYear] = useState(today.getUTCYear());

  useEffect() => {
   const newDate = new Date([year, month, day]);
   const target = { name, value: newDate };

   onChange({ target });
  }, [day, month, year]);

  return (
    //do your JSX here;
  );
}