求助：使用Signals-React无法更新输入框字段值

问题说明 #

使用@preact/signals-react做状态管理，为三个输入框绑定通用changeHandler，通过name属性更新signal对象的对应属性，但输入内容时输入框无法同步显示更新。

问题原因 #

Preact Signals中useSignal返回的信号值是不可变对象，直接修改对象的属性（如(state.value as any)[name] = value）不会触发信号的更新通知，组件因此不会重新渲染。

解决方案 #

方案1：创建新对象更新信号（推荐，符合不可变原则）

修改onHandleChange函数，通过扩展运算符创建新对象替换原信号值，触发组件更新：

const onHandleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = event.target;
  state.value = {
    ...state.value,
    [name]: value
  };
};

方案2：使用useMutableSignal（支持直接修改属性）

如果更倾向于直接修改对象属性，可以使用useMutableSignal（需确保@preact/signals-react版本支持）：

1. 导入useMutableSignal：

import { useMutableSignal } from "@preact/signals-react";

2. 替换useSignal为useMutableSignal：

const state = useMutableSignal({
  textField1: "",
  textField2: "",
  textField3: ""
});

3. 原onHandleChange函数无需修改，直接修改属性即可触发更新。

修改后的完整代码（方案1） #

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { useSignal } from "@preact/signals-react";

export default function BasicTextFields() {
  const state = useSignal({
    textField1: "",
    textField2: "",
    textField3: ""
  });

  const onHandleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    state.value = {
      ...state.value,
      [name]: value
    };
  };

  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <TextField
        name="textField1"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={onHandleChange}
        value={state.value.textField1}
      />
      <TextField
        name="textField2"
        id="filled-basic"
        label="Filled"
        variant="filled"
        onChange={onHandleChange}
        value={state.value.textField2}
      />
      <TextField
        name="textField3"
        id="standard-basic"
        label="Standard"
        variant="standard"
        onChange={onHandleChange}
        value={state.value.textField3}
      />
    </Box>
  );
}

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