如何在 useEffect 中重置 TextField 值？

Question

我有一种情况，我用一个状态控制我的组件，所以每次我可以点击一个项目并切换我的组件内的内容，但事情是这样的， 在我的组件中的一个文本字段中，我将 defaultValue 设置为 state.note，所以我可以看到 state 中的值，如下所示，

const Rightbar: React.FC<rightbarProps> = ({ currentTodoId }) => {
  // global state management
  const todos  = useSelector((state:RootState)=>
    state.todo.todos.filter((todo=>todo.id === currentTodoId))
    );
  const currentTodo = todos[0]
//......some code

 <TextField
          id="noteTodo"
          label="Note"
          onBlur={()=>updateTodoNote()}
          onKeyPress={(e)=>keypressUpdateTodoNote(e)}
          multiline={true}
          defaultValue={currentTodo?.note ? currentTodo.note : ""}
          inputRef ={noteRef}
          size="medium"
          className={classes.remember}
          variant="outlined"
          rows={5}
        />

所以一切正常。但是如果我在 textfield 中更改了某些内容，这将触发我的 redux 调度和更改状态，这就是我打算做的，之后，当我尝试通过单击另一个项目来更改状态时，textField 仍然是我输入的最后一件事取而代之的是默认值“”，我想这是因为当我输入一些东西时，我设置了文本字段的值，它会覆盖默认值，所以即使我切换状态，它仍然是一样的。

那么有人知道如何处理这种情况吗？ 和我的问题一样，现在我的解决方案是每次切换状态（useEffect）时将 Textfield 值更改为 null，因此它会显示 defaultValue。但我不知道该怎么做

Answer 1

有几个解决方案可以做到这一点：

1. 如果您有开关的状态，则可以将其作为依赖项传递给 useEffect，它会在您每次单击开关时执行您的逻辑。

在这种情况下，您必须像这样添加一个 useEffect：

useEffect(() => {
   currentTodo?.note = ''; // or call your function to reset the value you need
}, [ nameOfYourSwitchVariable ])

1. 如果开关值不可访问，则只需创建一个 useEffect 将您的注释值更改为 ''，并仅在挂载时触发。

useEffect(() => {
       currentTodo?.note = ''; // or call your function to reset the value you need
    }, [ nameOfYourSwitchVariable ])

另外，您可以在 TextField 组件中使用 || 运算符而不是三元作为 defaultValue

<TextField
  ...
  defaultValue={currentTodo?.note || ''}
  ....
/>