时间戳

首页 > 解决方案 > 如何创建一个“处理”多个文本字段以及字符计数器文本字段的处理函数

javascript - 如何创建一个“处理”多个文本字段以及字符计数器文本字段的处理函数

问题描述

这是以下内容的延续： 如何将处理程序函数用于两个不同的目的。SPFX（反应/打字稿）

我已经取得了一些进展，所以这不是重复的，它是第 2 部分。

我当前的代码处理程序是：

  const {value} = (evt.target as any);
  const countKey = `${evt.target.name}Count`;
  const obj = {
    [evt.target.name]: value,
    [countKey]: value.toString().length,
  };
  this.setState({
    ...this.state,
   obj
}, () => { console.log(obj), console.log(countKey+'countKey'), console.log(value+'value');});
}

带有相关字段的渲染：

<td><TextField //THIS IS THE USER INPUT TEXTFIELD WHICH I WANT COUNTED BY THE TEXTFIELD BELOW!
        name="EssCrit1"
        value={this.state.EssCrit1}
        onChange={this.handleChange}
        multiline rows={2}
        />
        </td>
        <td ><TextField //THIS IS THE CHARACTER COUNTER FIELD!
        name="EssCritChars1"
        value={this.state.EssCrit1Count}
        disabled={true} 
        />
     </td>

如您所见，我正在记录 obj ，这显示了输入的正确文本字段值，它还计算了多少个字符。问题是它不允许在文本字段中输入文本。值 (EssCrit1) 和 (EssCrit1Count) 字段似乎正在注册按键显示：

[object Object]: {EssCrit1: "h", EssCrit1Count: 1}
EssCrit1: "h"
EssCrit1Count: 1

__proto__: Object

在控制台中。但如前所述，它不允许在该字段中输入任何文本。似乎一旦输入某些内容，状态就会被覆盖。或者其他不明显的内容。

如果它有帮助，这是我对 EssCrit1 文本字段的状态，它是伴随的字符计数器：

EssCrit1:null,
EssCrit1Count: null,

标签： javascriptreactjsspfx

解决方案

一起去：

public handleChange = (evt: any) => {
  const {value} = (evt.target as any);
  const countKey = `${evt.target.name}Count`;
  const obj = {
    [evt.target.name]: value,
    [countKey]: value.toString().length,
  };
  this.setState(prevState => ({prevState, ...obj}));
 }

对于渲染：

<td><TextField
     name="EssCrit1"
     value={this.state.EssCrit1}
     onChange={this.handleChange}
     multiline rows={2}
     />
     </td>
     <td ><TextField 
     name="EssCrit1Count"
     value={this.state.EssCrit1Count}
     disabled={true}               
     />
     </td>

将来自处理程序的 const CountKey 变量赋值末尾的文本“计数”与需要它的状态相匹配。主要问题是状态的更新。我把它改成了

this.setState(prevState => ({prevState, ...obj}));

从

this.setState(prevState => ({...prevState, newState });

其中包含处理程序中详述的更改。希望这可以帮助某人。我将对我从获得的巨大帮助中学到的东西进行逆向工程。一如既往地感谢大家。

推荐阅读