Material-UI TextField的required与defaultValue属性失效但placeholder正常问题

问题根因 #

• defaultValue失效：你同时为TextField配置了value属性和defaultValue属性。React表单组件不支持同时使用受控模式（绑定value+onChange）和非受控模式（用defaultValue），二者共存时defaultValue会被直接忽略，优先级以value为准。
• required失效：required是HTML原生表单验证属性，只有组件被包裹在<form>标签内、且触发表单提交事件时才会触发默认校验逻辑。你当前是单独点击保存按钮触发保存逻辑，没有走表单提交流程，因此原生校验不会生效。

解决方案 #

1. 修复defaultValue不生效问题 #

既然你已经用了受控模式绑定editingText，直接在点击编辑按钮触发编辑状态的同时，给editingText赋初始默认值即可，删除TextField上的defaultValue属性：

<IconButton aria-label="Edit">
  <EditIcon onClick={() => {
    setTaskEditing(task.id)
    // 这里设置初始值，替换成你需要的默认值即可，比如原任务文本task.text
    setEditingText('hello')
  }} />
</IconButton>

2. 修复required不生效问题 #

两种方案二选一即可：

• 方案一：保留现有交互，自行加非空校验。点击保存按钮时先判断内容是否为空，空值拦截保存逻辑

<SaveIcon onClick={() => {
  if (!editingText.trim()) return alert('请输入内容')
  editTask(task.id)
}} />

• 方案二：改用form表单原生校验。把输入区域包裹在<form>标签内，保存按钮设为type="submit"，在表单提交事件中处理保存逻辑，此时required属性会自动生效

// 编辑态的CardHeader部分修改为
title={
  <form id="edit-form" onSubmit={(e) => {
    e.preventDefault()
    editTask(task.id)
  }}>
    <TextField
      style={{ width: 410 }}
      required
      variant="outlined"
      onChange={(e) => setEditingText(e.target.value)}
      placeholder='This is a placeholder'
      value={editingText}
    />
  </form>
}
// 保存按钮修改为
<IconButton aria-label="SaveEdits" type="submit" form="edit-form">
  <SaveIcon />
</IconButton>

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