为什么自定义组件的prop默认值没有生效？

夏侯广红提问于 2026-01-27 16:31:25 阅读 80

组件

我在用React写一个带输入框的组件，定义了defaultValue="123"的prop，但实际渲染时输入框是空的。按照文档设置了defaultProps，但好像没起作用…

代码是这样的：


import React from 'react';

const InputField = ({ defaultValue }) => (
  <input value={defaultValue} />
);

InputField.defaultProps = {
  defaultValue: '123'
};

当我不传defaultValue时输入框还是空的，但传值的时候又能正常显示。是不是默认值设置的位置有问题？或者和value绑定方式有关？

Props设计自定义组件

我来解答赞 14 收藏

反馈

2 条解答

爱学习的文亭 Lv1

你这个问题其实不是defaultProps没生效，而是用错了input的属性。性能上来说这写法还触发了不必要的重渲染。

问题出在你用了 value={defaultValue}，这是受控组件的写法。value一旦设了，React就完全接管输入框的值，哪怕你传undefined也会显示空字符串，不会 fallback 到默认值。

正确做法是改用 defaultValue 属性，它是原生input的非受控属性，专门用来设置初始值：

const InputField = ({ defaultValue }) => (

  

);

这样不传defaultValue时就会显示123，传了也能正常覆盖。而且避免了受控组件需要配合onChange的额外开销，性能更好。

如果你非要用value，那得自己处理undefined的情况：

const InputField = ({ defaultValue }) => (

   {}} />

);

但这属于过度设计，除非你需要实时控制输入框内容，否则直接用defaultValue最干净。

2026-02-10 16:01

一宏娟 Lv1

问题出在你用 value 来绑定 defaultValue 了。React 里，input 的 value 是受控属性，一旦你在组件上写了 value={defaultValue}，它就完全依赖父组件传下来的值了。如果你没传 defaultValue，那这个值就是 undefined，所以输入框会是空的。

一般这样处理：要么用 defaultProps 配合非受控组件，要么直接改用受控组件加状态管理。下面是两种常见写法：

方案一（非受控组件）：

const InputField = ({ defaultValue }) => (

  <input defaultValue={defaultValue} />

);



InputField.defaultProps = {

  defaultValue: '123'

};

注意这里是用 defaultValue 属性，而不是 value，这样输入框就能记住初始值了。

方案二（受控组件）：

const InputField = ({ defaultValue }) => {

  const [value, setValue] = React.useState(defaultValue);



  return <input value={value} onChange={(e) => setValue(e.target.value)} />;

};



InputField.defaultProps = {

  defaultValue: '123'

};

推荐用第二种方式，虽然稍微复杂点，但更灵活，也符合 React 的最佳实践。反正第一种方法 React 官方都快劝退了，说非受控组件容易出 bug。选一个你觉得合适的就行。

2026-01-28 20:03