Текстовое поле обновления 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 сценариях ios.

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, кажется, работает правильно. Скажите, что не так с результатом. Кроме того, вам необходимо удалить maxLength из textarea, чтобы пользователь мог вводить более длинный текст.
2. Поместите event.target.value = e.target.value.replace(/#|&/gm, '') в конец handleWordCount.

/#|&/gm - это правило регулярного выражения. Вы можете использовать любое другое правило, которое соответствует вашим потребностям.