SPFX(React/TypeScript)多文本框及字符计数器处理函数问题续篇

嘿，我瞅出来问题在哪了！你控制台里能看到obj的内容是对的，但输入框没法输入，核心原因是状态更新的方式不对——你把构造好的obj作为一个嵌套属性塞进state里了，但渲染的时候输入框绑定的是this.state.EssCrit1，根本没从嵌套的obj里取值，自然输入框一直停留在初始的null状态，没法响应输入。

咱们直接改两处就能搞定：

1. 修正setState的写法，直接展开状态字段 #

原来的代码里，你是把obj作为state的一个属性来更新，导致state结构变成了{ EssCrit1: null, EssCrit1Count: null, obj: { ... } }，但输入框绑定的是顶层的EssCrit1，所以根本拿不到最新值。咱们要把obj里的键值对直接展开到state顶层：

handleChange = (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const target = evt.target as HTMLInputElement;
  const value = target.value;
  const countKey = `${target.name}Count`;
  
  // 构造要更新的状态字段
  const updateFields = {
    [target.name]: value,
    [countKey]: value.length // 直接用length就行，不用转toString
  };
  
  // 把updateFields的属性直接合并到state顶层
  this.setState({ ...this.state, ...updateFields }, () => {
    console.log(updateFields);
    console.log(`${countKey} countKey`);
    console.log(`${value} value`);
  });
};

2. 适配Office UI Fabric TextField的类型（可选但更规范） #

因为你用的是SPFX里的Office UI Fabric TextField，它的onChange事件其实会直接传递newValue参数，不用自己从evt.target取，咱们可以把类型改得更贴合组件：

handleChange = (
  event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
  newValue?: string
) => {
  if (!newValue) return; // 空值直接返回
  
  const name = (event.target as HTMLInputElement).name;
  const countKey = `${name}Count`;
  
  const updateFields = {
    [name]: newValue,
    [countKey]: newValue.length
  };
  
  this.setState({ ...this.state, ...updateFields }, () => {
    console.log(updateFields);
    console.log(`${countKey} countKey`);
    console.log(`${newValue} value`);
  });
};

验证效果 #

修改后，你的状态结构会保持顶层的EssCrit1和EssCrit1Count，输入框绑定的this.state.EssCrit1会实时拿到最新输入值，自然就能正常输入了；同时禁用的计数文本框this.state.EssCrit1Count也会同步更新字符数。

你的渲染代码和初始状态定义都是没问题的，不用改动~

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