Kontrolsuz Komponentlər

Biz çox halda, anketləri tətbiq etmək üçün kontrol olunan komponentlər işlətməyi tövsiyə edirik. Kontrol olunan komponentlərdə anket məlumatları React komponenti tərəfindən idarə olunur. Buna alternativ kontrolsuz komponentlərdir. Bu komponentlərdə anket məlumatları DOM tərəfindən idarə olunur.

Kontrolsuz komponent işlətdikdə DOM-dan anket dəyərlərini almaq üçün hadisə işləyiciləri ilə state-i yeniləmək əvəzinə ref-dən istifadə edə bilərsiniz.

Məsələn, aşağıdakı kodda kontrol olunmayan komponent tək ad qəbul edir:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();  }

  handleSubmit(event) {
    alert('Göndərilən ad: ' + this.input.current.value);    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Ad:
          <input type="text" ref={this.input} />        </label>
        <input type="submit" value="Göndər" />
      </form>
    );
  }
}

CodePen-də sınayın

Kontrolsuz komponentlərdə həqiqət mənbəyi DOM-da saxlanır. Bu səbədən, kontrolsuz komponentlər ilə React və React olmayan kodları inteqrasiya etmək daha asandır. Komponentlər kontrolsuz olduqda yazılmış kodun həcmi daha kiçik ola bilər. Əks halda, kontrol olunan komponentlərdən istifadə edin.

Əgər xüsusi ssenaridə hansı tipli komponenti işlətməyi bilmirsinizsə, kontrol olunan və kontrolsuz anket sahələrinin müqayisəsi yazısını faydalı tapa bilərsiniz.

Təyin Olunmayan Dəyərlər

React-in render zamanı anket elementlərinin value atribut dəyəri DOM dəyərlərininin üzərindən yazılacaq. Kontrolsuz komponentlərdə təyin olunmayan dəyərlərin React tərəfindən bildirilməsini sonrakı yeniliklərin isə kontrolsuz olmasını istəyə bilərsiniz. Bu ssenari üçün value atributu yerinə defaultValue atributundan istifadə edə bilərsiniz. Komponent mount olunduqdan sonra defaultValue atributu dəyişdikdə DOM elementinin dəyəri yenilənməyəcək.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Ad:
        <input
          defaultValue="Kamal"          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Göndər" />
    </form>
  );
}

Eyni formada, <input type="checkbox"> və <input type="radio"> elementləri defaultChecked, <select> və <textarea> elementləri isə defaultValue atributlarını dəstəkləyirlər.

Fayl anket sahəsi Təqi

İstifadəçinin sistem yaddaşından bir və ya bir neçə faylı seçib serverə yükləmək və ya Fayl API-ı ilə JavaScript-də manipulyasiya etmək üçün HTML <input type="file"> təqindən istifadə edilir:

<input type="file" />

<input type="file" /> elementinin dəyəri yalnız istifadəçi (proqram tərəfindən mümkün deyil) tərəfindən təyin edilir. Bu səbəbdən, bu element React-də həmişə kontrolsuz komponentdir.

İstifadəçi tərəfindən seçilmiş fayllar üzərində əməliyyatlar üçün Fayl API-ından istifadə edin. Aşağıdakı nümunədə, göndərmə işləyicisindən fayllardan istifadə edə bilmək üçün DOM noduna ref əlavə olunur:

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Seçilmiç fayl - ${this.fileInput.current.files[0].name}`    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Fayl yüklə:
          <input type="file" ref={this.fileInput} />        </label>
        <br />
        <button type="submit">Göndər</button>
      </form>
    );
  }
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<FileInput />);

CodePen-də sınayın