如何将处理程序函数用于两个不同的目的。 SPFX (React/TypeScript)

Question

我正在创建 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 事件？

任何帮助都会一如既往的好。

C

Answer 1

如果我没理解错的话，你可以像这样在你的 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 });
}

Answer 2

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

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

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

如何将处理程序函数用于两个不同的目的。 SPFX (React/TypeScript)

How to use a handler function for two different purposes. SPFX (React/TypeScript)

typescript

reactjs

spfx