如何将 Formik Field 渲染为 textarea + styled-components？

Question

我正在使用 styled-components 和 Formik。除了 textareas 或 selects 等，一切都运行良好。Styled-components 和 Formik 具有相同的属性 as，当我想连接它时，我没有得到预期的结果。

<StyledTextArea as={Field} placeholder="" name="topic" id="topic"></StyledTextArea>

使用 Formik，我们还需要为 Field 元素传递一个属性 as。它应该看起来像这样：

<Field as="textarea" id="topic" name="topic"></Field>

我通过写这个解决了这个问题：

const StyledTextareaField = (props) => (
    <Field {...props} as="textarea" id="description" name="description" children={props.children}></Field>
  );

还有这个：

<StyledTextArea
              as={StyledTextareaField}
              placeholder="Wpisz opis spotkania"
              id="description"
              name="description"
            ></StyledTextArea>

但我的问题是，当我在一个字母后开始打字时，我失去了文本区域的焦点，我必须再次单击以填充下一个字母等。

Answer 1

仅输入一个字符后失去焦点的问题是因为组件是在每次渲染后 DOM 中新创建和安装的。

您可以通过使用 React.memo() 包装您的组件来防止它。

一个formik字段组件可以这样写：

import {Field} from "formik";
import React from "react";

function MyFormikTextareaField({fieldName}){
  return (
    <Field name={fieldName}>
      {({field, form, meta}) => {
        return (
            <MyStyledTextareaComponent
              value={field.value}
              onChange={field.onChange}
            />
        );
      }}
    </Field>
  )
}

如果你更喜欢使用 React hooks，那么你可以这样写：

function MyFormikTextareaField({fieldName}) {
  const [field, meta, helpers] = useField(fieldName);

  return (
    <MyStyledTextareaComponent
      value={meta.value}
      onChange={field.onChange}
    />
  );
}

如何将 Formik Field 渲染为 textarea + styled-components？

How to render Formik Field as textarea + styled-components?

javascript

reactjs

styled-components

formik