html - 为 Formik Input 元素设置 ID 或名称

Question

有没有办法将 id 或名称设置为 Formik 输入字段，例如：

          <Field name="password">
            {({ field }) => (
              <FormikInput
                {...field}
                id="pswd"
                style={!errors.password ? null : {borderColor: '#D33F49'}}
                size="lg"
                inputType={togglePwdVisibility ? "text" : "password"}
                placeholder="Contraseña"
                touched={getIn(touched, field.name)}
              />
            )}
          </Field>

我需要它有一个 id 以便能够在其上调用 getElementById，所以我可以使用它的 css 值，例如：

window.getComputedStyle(document.getElementById("pswd"), null).getPropertyValue("width")

我得到一个错误，说

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 

此错误是由于 document.getElementById("pswd") 返回 null

我尝试使用 Name 也没有成功，难怪 document.getElementsByName 说“名称属性只能应用于 (X)HTML 文档”。

我能做什么？

提前致谢，

拉斐尔

标签： htmlreactjsformikreact-component