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字段会正确地从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);
...

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

1 个答案: