解决ForwardRef(InputBase)同时存在value与defaultValue属性的报错问题

你遇到的报错是React对输入组件的规范限制：输入组件只能选择受控或非受控两种模式之一，不能同时传入value和defaultValue属性：

• 受控模式：值完全由父组件传入的value属性控制，需要配合onChange回调实时更新绑定的状态
• 非受控模式：仅通过defaultValue设置初始值，后续输入值由DOM自身维护，不需要父组件传value控制

现在你同时传了两个属性才触发了冲突，如果你不想删除defaultValue=""，可以按下面两种方案处理：

方案1：切换为非受控模式 #

直接删除组件上的value={props.values.search}属性即可，如果你需要获取输入的值，可以用useRef绑定组件来读取：

import { useRef } from 'react';

// 组件内声明ref
const searchInputRef = useRef(null);

// 修改后的CustomInput调用
<CustomInput
  type="text"
  onChange={props.handleChange}
  onBlur={props.handleBlur}
  ref={searchInputRef}
  id="outlined-size-small"
  defaultValue=""
  variant="outlined"
  size="small"
  name="search"
  label="Search"
  disabled={props.isSubmitting}
/>

// 需要取值时调用：searchInputRef.current.value

这种模式下你设置的defaultValue=""会完全生效，不会再有报错。

方案2：保留受控模式，把默认值逻辑迁移到状态初始化 #

如果你需要保持输入值和props.values.search的实时同步（也就是继续用受控模式），其实你不需要保留defaultValue，只需要在初始化search对应的状态时，把初始值设为空字符串，就能实现和defaultValue=""完全一样的效果：

// 示例：如果你的状态是用useState声明的
const [values, setValues] = useState({
  search: "", // 初始值设为空，替代defaultValue的作用
  // 其他状态字段
})

修改后你可以直接删除defaultValue=""属性，功能不会有任何变化，也不会触发报错。如果你非要保留defaultValue属性也可以给它加个永远为假的判断条件（比如defaultValue={false && ""}），让属性实际不生效，不过完全没必要这么做。

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