使用 React 动态更新文本字段答案

【问题标题】：Dyn update Text field using React使用 React 动态更新文本字段
【发布时间】：2020-08-19 12:23:09
【问题描述】：

我有以下组件。 TextArea 允许用户输入最多 20 个字符。如果用户输入超过 20 个字符，则字符数不会超过 20 个。因此我们将在该输入字段上看到只有 20 个字符。

<div>{this.state.chars_left}</div>

上面的代码行将显示用户输入的字符数，它在 20 个计数处停止，因为在这种情况下指定的最大值为 20。我需要做两件事，

如果用户输入任何高于 20 的值。例如用户总共输入了 30 个字符，那么我们需要在计数器字段中显示 -10 表示用户又输入了 10 个字符。
此外，用户不能在此字段中输入特殊字符。例如“&”、“#”。我如何确保用户无法输入这 2 个特殊字符。

有人可以在上述两种情况下指导我吗？

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {chars_left: 20, max_chars: 20};
  }

  handleWordCount = event => {
    const charCount = event.target.value.length;
    const maxChar = this.state.max_chars;
    const charLength = maxChar - charCount;
    this.setState({chars_left: charLength});
  }

  render() {
    return (
      <div>
        <textArea
          rows={6}
          type="text"
          maxLength={this.state.max_chars}
          required
          onChange={this.handleWordCount}
        />
        <div>{this.state.chars_left}</div>
      </div>
    );
  }
};

ReactDOM.render(<MyApp />, document.getElementById('myapp'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="myapp"></div>

【问题讨论】：

handleWordCount 函数有什么问题？似乎是正确的。

标签： javascript html reactjs react-native dom

【解决方案1】：

handleWordCount 似乎工作正常。告诉它的结果有什么问题。此外，您需要从 textarea 中删除 maxLength 以让用户输入更长的文本。
将event.target.value = e.target.value.replace(/#|&/gm, '') 放在handleWordCount 的末尾。

/#|&/gm 是一个正则表达式规则。您可以使用任何其他适合您需要的规则。

【讨论】：