如何在结合Formik的Material UI TextField组件中条件使用Props

方法1：条件传递属性（无需Formik交互的自定义逻辑） #

如果你的自定义onChange不需要和Formik的状态管理交互（比如仅做前端校验、格式转换，不需要手动更新字段值），可以通过条件属性展开实现需求：

<Field
  as={TextFieldStyled}
  label={inputLabel}
  name={inputName}
  // 仅当存在自定义onChange时才传递该属性
  {...(customOnChangeMethod && { onChange: customOnChangeMethod })}
  // 仅当存在自定义value时才传递该属性，否则用Field默认值
  {...(customValue !== undefined && { value: customValue })}
/>

原理很直接：React中{...(condition && { key: value })}会在condition为真时添加对应属性，为假时则不传递，此时Field会自动使用自身默认的onChange和value逻辑。

方法2：Render Prop模式（需要Formik交互的自定义逻辑） #

如果你的自定义onChange需要调用Formik的setFieldValue（比如处理完自定义逻辑后还要更新字段值），推荐用Field的render prop模式，直接获取Formik的field和form对象：

<Field name={inputName}>
  {({ field, form }) => {
    // 优先使用自定义onChange，否则用Formik默认的field.onChange
    const handleChange = customOnChangeMethod 
      ? (event) => {
          // 把Formik的setFieldValue和字段名传给自定义方法，方便后续更新状态
          customOnChangeMethod(event, form.setFieldValue, field.name);
        }
      : field.onChange;

    // 优先使用自定义value，否则用Formik维护的field.value
    const inputValue = customValue !== undefined ? customValue : field.value;

    return (
      <TextFieldStyled
        label={inputLabel}
        {...field} // 传递Field默认的name、ref等属性
        onChange={handleChange}
        value={inputValue}
      />
    );
  }}
</Field>

这种方式能让自定义逻辑灵活对接Formik状态，比如你的自定义方法可以这么写：

const customOnChange = (e, setFieldValue, fieldName) => {
  // 自定义逻辑：格式化输入内容
  const formattedValue = e.target.value.toUpperCase();
  // 调用Formik方法更新字段状态
  setFieldValue(fieldName, formattedValue);
};

为什么原有写法不可行？ #

你之前尝试的onChange={customOnChange || onChangeDefault}会强制传递onChange属性，哪怕customOnChange不存在，这会直接覆盖Field的默认行为。而上面的两种方式，只有在有自定义逻辑时才传递对应属性，否则让Field使用自身默认实现，刚好解决你的痛点。

内容的提问来源于stack exchange，提问作者Salo Avalos