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

67up9zun 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(143)

我正在使用样式化组件和Formik。除了textareas或selects等之外，一切都运行良好。样式化组件和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的重点，我必须再次点击，以填补下一个字母等。

JavaScript

来源：https://stackoverflow.com/questions/61869921/how-to-render-formik-field-as-textarea-styled-components

2条答案

按热度按时间

368yc8dk1#

在输入一个字符后失去焦点的问题是因为组件是在每次渲染后新创建并挂载在DOM中的。
你可以通过使用React.memo（） Package 你的组件来防止它。
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}
    />
  );
}

赞(0）回复(0）举报 2023-04-10

afdcj2ne2#

# use  <textarea/> instead of <input/>

<input
                          placeholder='description'
                          {...formik.getFieldProps('description')}
                          name='description'
                          className={clsx(
                            'form-control form-control-solid mb-3 mb-lg-0',
                            {'is-invalid': formik.touched.description && formik.errors.description},
                            {
                              'is-valid': formik.touched.description && !formik.errors.description,
                            }
                          )}
                          autoComplete='off'
                          disabled={formik.isSubmitting || loading}
                        />
                        
                        
                        ----------------
                        

     <textarea
                          placeholder='description'
                          {...formik.getFieldProps('description')}
                          name='description'
                          className={clsx(
                            'form-control form-control-solid mb-3 mb-lg-0',
                            {'is-invalid': formik.touched.description && formik.errors.description},
                            {
                              'is-valid': formik.touched.description && !formik.errors.description,
                            }
                          )}
                          autoComplete='off'
                          disabled={formik.isSubmitting || loading}
                        />

”

赞(0）回复(0）举报 2023-04-10

我来回答

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

2条答案

相关问题

热门标签

最新问答