Dyn使用React更新文本字段

Question

我有以下组件。TextArea允许用户输入最多20个字符。如果用户输入超过20个字符，字符数不会超过20。所以我们在该输入栏中只能看到20个字符。

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

上面这行代码将显示用户输入的字符数，由于在这种情况下，指定的最大值是20，所以它停止在20个字符上。我需要做2件事情。

1. 如果用户输入的字符数超过20个，例如用户总共输入了30个字符，那么我们需要在计数器字段中显示-10，表示用户多输入了10个字符。
2. 另外，用户不应该在这个字段中输入特殊字符。例如："&"，"#"。我如何确保用户不能输入这2个特殊字符。

谁能在以上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的结尾处，是一个regexp规则。

/#|&/gm 是一个regexp规则。你可以使用任何其他适合你需要的规则。