IT技术 - 如何将处理函数用于两种不同的目的。SPFX（react/typescript） - 吾爱随笔录

如何将处理函数用于两种不同的目的。SPFX（react/typescript）

IT技术 reactjs typescript spfx

2021-05-02 13:10:25

我正在创建一个 SPFX 表单（react/typescript）。我正在使用处理程序函数：

public handleChange = (evt: any) => {
    const {value} = (evt.target as any);

    this.setState({
      ...this.state,
      [evt.target.name]: value
    });
  }

处理多个文本字段。

我现在想要做的是让这个处理程序满足字符计数文本字段。（我知道我可以使用标签！）这些文本字段计算每个文本字段中输入的字符数。我不知道如何为此编写代码。以下是我尝试过的：

处理函数：

public handleChange = (evt: any) => {
    const {value} = (evt.target as any);

    this.setState({
      ...this.state,
      [evt.target.name]: value
    }, () => {
      let wordCount = this.state.SOMETHING.toString().length; //This is wrong!
      this.setState({
        ...this.state,
        [evt.target.name]: wordCount
    });
  });
}

但正如你所看到的，我不知道该放什么。正如您在wordCount变量中看到的那样，我正在计算文本字段状态的字符数，但这显然不起作用，因为我需要它来满足通过处理程序函数运行的所有文本字段。您还可以看到，我正在尝试使用将其设置为状态[evt.target.name]: wordCount，我认为这可能更接近正确。但不确定。

如果有帮助，这里有 2 个文本字段，一个是用户输入文本字段，另一个（在它下方）是字符计数器：

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

   <td ><TextField 
        name="EssCritChars1"
        value={this.state.EssCritChars1}
        disabled={true}           
      />
 </td>

正如你所看到的，字符计数器有它自己的状态，但如上所述，我如何获得处理函数来满足这一点以及用户输入文本字段的 onChange 事件？

任何帮助都会像往常一样很棒。

2个回答

如果要处理任何给定文本字段的值和值的长度：

public handleChange = (evt: any) => {
    const {value} = (evt.target as any);

    this.setState({
      [evt.target.name]: value,
      `${evt.target.name}Count`: value.toString.length,
    });
}

如果我的理解正确，您可以在 onChange 中添加一个带有相应计数器名称的附加参数，如下所示：

<TextField
  name="EssCrit1"
  value={this.state.EssCrit1}
  onChange={this.handleChange('EssCritChars1')} // curry the name of the counter like this
  multiline rows={2}
/>

// We'll use counterName to update the correct counter state value
handleChange = (counterName: string) => (evt: any) => {
    const {value} = (evt.target as any);

    this.setState({
      [evt.target.name]: value
    }, () => {
      let wordCount = this.state[evt.target.name].toString().length; // Access as an array to use dynamic keys
      this.setState({
        [counterName]: wordCount // now we have a separate counter variable
    });
  });
}

或者，您可以使用带有可选第二个参数的内联函数，如下所示：

// Text field that has a counter
<TextField
  name="EssCrit1"
  value={this.state.EssCrit1}
  onChange={(e) => this.handleChange(e, 'EssCritChars1')} // Inline. Pass event and name of counter
  multiline rows={2}
/>
// Text field that doesn't need a counter
<TextField
  name="another_field"
  value={this.state.another_field}
  onChange={this.handleChange} // We only need the event so don't bother creating an inline function
  multiline rows={2}
/>

// Second param is optional
handleChange = (evt: any, counter = '') => {
  const {value} = (evt.target as any);
  let newState = {
    [evt.target.name]: value
  }
  if (counter) {
    newState[counter] = value.toString().length
  }
  this.setState(prevState => ({...prevState, newState });
}

其它你可能感兴趣的问题

上一篇将庞大的数据对象保存在 Redux 的单个存储中是个好主意吗？下一篇可以在Promise的 THEN 构造内分派操作吗？