React中如何为TextField同时设置默认值与onChange更新事件

解决方案 #

React 表单组件分为受控、非受控两种模式，不可同时混用 defaultValue（非受控模式，状态由DOM管理）和 value+onChange（受控模式，状态由React state管理）配置，你可以将组件调整为受控模式解决问题，修改步骤如下：

1. 调整useState的初始值，把原defaultValue的默认值逻辑迁移到state初始配置中：

const [openingHours, setOpeningHours] = useState({
  // 原defaultValue逻辑移到此处
  monday: props.times[0].time1 !== undefined ? props.times[0].time1 : '00:00'
  // 也可以用更简洁的写法：monday: props.times[0]?.time1 ?? '00:00'
});

2. 修改TextField组件属性，删除defaultValue，新增value和onChange绑定对应状态与处理函数：

<TextField
  type="time"
  value={openingHours.monday}
  onChange={mondayHandler}
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
    color: 'blue',
  }}
  InputProps={{
    classes: {
      underline: classes.underline,
      root: classes.timeRoot,
    },
  }}
/>

补充场景：props异步更新的处理

如果props.times是组件初始化后才异步获取到的值（比如接口返回数据），需要额外添加useEffect监听prop变化，同步更新state：

useEffect(() => {
  setOpeningHours(prev => ({
    ...prev,
    monday: props.times[0]?.time1 ?? '00:00'
  }))
}, [props.times])

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