Formik复选框，带有Semantic-UI样式

Question

嗨，

我一直在尝试将Semantic-UI（Semantic-UI React，具体而言）和Formik结合起来，但我一直遇到问题。目前我遇到了复选框问题。

我正在尝试使用Semantic-UI样式创建一个通用的Formik-aware复选框组件。这就是我目前拥有的：

const Checkbox = ({ name, title, toggle, fitted, inline }, context) => {
    const { formik } = context;
    const error = formik.errors[name];
    const value = formik.values[name];

    return (
        <Form.Checkbox
            inline={inline}
            fitted={fitted}
            label={title || (fitted ? null : name)}
            name={name}
            toggle={toggle}
            checked={value ? true : false}
            onChange={(e, { name, checked }) => formik.setFieldValue(name, !!checked)}
            />
    );
};

Checkbox.contextTypes = { formik: PropTypes.object }

这种作品。我目前唯一的问题是嵌套值。例如：

<Checkbox name="sections.0.enabled"/>

我的Checkbox实现将使用formik.values["sections.0.enabled"]作为值，而formik Field将正确地从formik.values["sections"][0]["enabled"]中选择值。

有没有更好的方法来做到这一点，还是我应该扁平化输入值？

Answer 1

您可以使用lodash.get（https://www.npmjs.com/package/lodash.get）实现此目的，或者只使用完成相同工作的函数：

function get( object, keys, defaultVal ){
  keys = Array.isArray( keys )? keys : keys.split('.');
  object = object[keys[0]];
  if( object && keys.length>1 ){
    return get( object, keys.slice(1) );
  }
  return object === undefined? defaultVal : object;
}

然后，

...
const error = get(formik.errors, name);
const value = get(formik.values, name);
...