Saya memiliki komponen di bawah ini. TextArea memungkinkan pengguna untuk memasukkan maksimal 20 karakter. Jika pengguna memasukkan lebih dari 20 karakter, jumlah karakter tidak diperbarui lebih dari 20. Jadi kita hanya akan melihat 20 karakter pada kolom input tersebut.

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

Baris kode di atas akan menunjukkan jumlah karakter yang dimasukkan oleh pengguna dan berhenti pada hitungan 20 karena nilai maksimal yang ditentukan adalah 20 dalam kasus ini. Saya perlu melakukan 2 hal,

  1. Jika pengguna memasukkan apa pun di atas 20. untuk mis. pengguna memasukkan total 30 karakter, maka kita perlu menampilkan -10 di bidang penghitung yang menunjukkan bahwa pengguna memasukkan 10 karakter lagi.
  2. Selain itu, pengguna tidak boleh mengetik karakter khusus di bidang ini. Untuk misalnya "&", "#". Bagaimana saya memastikan pengguna tidak dapat mengetikkan 2 karakter khusus ini.

Dapatkah seseorang tolong bimbing saya dalam 2 skenario di atas.

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>
0
user3019647 5 Mei 2020, 01:58

1 menjawab

Jawaban Terbaik
  1. handleWordCount tampaknya berfungsi dengan benar. Katakan apa yang salah dengan hasil itu. Juga, Anda perlu menghapus maxLength dari textarea agar pengguna dapat mengetik teks yang lebih panjang.
  2. Letakkan event.target.value = e.target.value.replace(/#|&/gm, '') di akhir handleWordCount.

/#|&/gm adalah aturan regexp. Anda dapat menggunakan aturan lain yang sesuai dengan kebutuhan Anda.

1
Alex Khristo 4 Mei 2020, 23:13