javascript - Dyn 使用 React 更新文本字段

Question

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

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

上面的代码行将显示用户输入的字符数，并在 20 处停止，因为在本例中指定的最大值为 20。我需要做两件事，

1. 如果用户输入超过 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>

Answer 1

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

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