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

【问题标题】：How to render Formik Field as textarea + styled-components?如何将 Formik Field 渲染为 textarea + styled-components？
【发布时间】：2020-05-18 12:47:32
【问题描述】：

我正在使用样式组件和 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>

但我的问题是，当我在一个字母后开始输入时，我失去了 textarea 的焦点，我必须再次单击以填写下一个字母等。

【问题讨论】：

您是否在地图中使用它？
不，每个Field都是一个单独的html元素

标签： javascript reactjs styled-components formik

【解决方案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 钩子，那么您可以编写如下内容：

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

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

【讨论】：