Dyn使用React更新文本字段

我有以下组件。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>

解决方案:

  1. handleWordCount似乎可以正常工作。请告诉我们它的结果有什么问题。另外,你需要从textarea中删除maxLength,让用户输入更长的文字。
  2. event.target.value = e.target.value.replace(/#|&/gm, '') 在handleWordCount的结尾处,是一个regexp规则。

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

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/27018.html

(0)
上一篇 1天前
下一篇 1天前

相关推荐

发表评论

登录后才能评论