Question

我是React和Formik的新手。我对如何在位置对象中同时获取经纬度有疑问。我在输入位置得到了[object，Object]。演示我的问题。我创建了一个沙箱https://codesandbox.io/embed/great-payne-hk6nd。谢谢！

Answer 1

您可以将MyEnhancedForm更改为此：

mapPropsToValues({ location }) {

return {location:[location.lat,location.lng]}

}

或类似的内容。这样，您可以同时渲染lng和lat

Answer 2

在MyForm中，您将获得values个道具。

const { values, touched, errors, isSubmitting } = props;

let location = values.location;
location = `lat:${location.lat}, lng:${location.lng}`

在Field中，您需要设置value道具，

<Field value={location} name="location" type="text" className="c-input" readOnly />

Demo

Answer 3

这是修复沙箱的地方

codesandbox

基本上，我将您的mapPropsToValues更改为此：

  mapPropsToValues({ location }) {
    const lat = location.lat || "";
    const lng = location.lng || "";
    return {
      location: `${lat}, ${lng}`,
    };
  },

Answer 4

const MyForm = props => {
  const { touched, errors, isSubmitting, values } = props; // Formik pass values to props

  return (
    <Form>
      <input type="text" value={`${values.location.lat}, ${values.location.lng}`} readOnly/> // We preferred input instead of Field.
      {touched.location && errors.location && (
        <p className="u-text-red-600 text-xs mt-2 absolute u-mt-4">
          {errors.location}
        </p>
      )}
      <button
        type="submit"
        className="c-button c-button--info c-button--block u-my-4"
        disabled={isSubmitting}
      >
        Submit
      </button>
      <DisplayFormikState {...props} />
    </Form>
  );
};

单个输入上有多个字段名称

4 个答案: