1

你好，

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

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

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"].

有没有更好的方法来做到这一点，或者我应该把输入值变平？

4

1 回答 1

0

您可以使用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);
...
于 2019-03-11T09:10:33.873 回答