Счетчик символов React Redux Form в текстовой области

У меня есть форма, созданная с помощью React-Redux-Form, и мне нужно реализовать и отобразить количество символов, чтобы ограничить ввод до 200. Я реализовал для него проверку, но хочу отображать количество символов при вводе пользователем.

Вот мой контроль:

<div className="input-group">
  <label>Step 2: Description of Goods *</label>
  <Control.textarea
   id="descriptionOfGoods"
   model=".descriptionOfGoods"
   name="descriptionOfGoods"
   autoComplete="off"
   className="form-control"
   controlProps={{onKeyPress:_preventCarriageReturn}}
   mapProps={{..._mapFieldClass}}
   validators={{isRequired, remoteError, maxLength: (val) => maxLength(val, 200)}}
   onChange={(e) => this.removeApiError(e)}
  />

  <span className="tick-valid"><Icon yicon="Validation_Tick"/></span>
  <span className="cross-error"><Icon yicon="X"/></span>
  <Errors 
   id="descriptionOfGoodsErrors"
   className="help-block"
   model=".descriptionOfGoods"
   show={{touched: true, focus: false}}
   messages={{
     isRequired: 'Description of goods is required.',
     remoteError: validationError.descriptionOfGoods,
     maxLength: 'Max characters allowed is 200'
   }}
  />
</div>

Есть идеи?


person Mauro74    schedule 27.02.2018    source источник
comment
Предоставьте минимально воспроизводимый пример.   -  person Code-Apprentice    schedule 27.02.2018


Ответы (1)


Для текстовой области вам нужно прослушать три события. Один для onKeyUp, один для onPaste и один для onCut. Затем всякий раз, когда запускается одно из этих событий, вы можете получить текущий текст в текстовой области, чтобы определить текущую длину, и использовать это значение для обновления диапазона, который может отображать количество оставшихся символов.

person sme    schedule 27.02.2018
comment
В современных браузерах вы можете просто прослушивать событие input. - person Jordan Running; 27.02.2018