Удирдагдаагүй компонентууд

Ихэнх тохиолдолд бид форм хэрэгжүүлэхэд удирдагдсан компонентууд хэрэглэхийг зөвлөдөг. Удирдагдсан компонентод формын өгөгдөл нь React компонентоор зохицуулагддаг. Өөр нэг арга нь удирдагдаагүй компонент ашиглах бөгөөд формын өгөгдөл нь DOM-р зохиуцуулагддаг.

Удирдагдаагүй компонент бичихдээ төлөв болгоны шинэчлэлт дээр эвентийн удирдлага бичихийн оронд формын утгийг DOM-с авахийн тулд ref ашигладаг.

Жишээлбэл, энэ код нь нэг нэрийг удирдагдаагүй компонент дээр хүлээн авж байна

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

CodePen дээр турших

Удирдагдаагүй компонент үнэний эх сурвалжийг DOM дээр үлдээж байгаа учир удирдагдаагүй компонент ашиглаж байгаа үед React болон React бус веб програмуудыг хооронд нэгтгэхэд амархан байдаг. Та хурдан хийхийг хүссэн үед энэ арга нь бага бичиглэлтэй байж болно. Бусад тохиолдолд та ихэвчлэн удирдагдсан компонентууд ашиглах нь зүйтэй.

Танд ямар тохиолдолд аль төрлийн компонентийг ашиглах зүйтэй нь эргэлзээтэй байвал удирдагдсан болон удирдагдаагүй оролтыг харьцуулсан энэ нийтлэл тус болж мэднэ.

Анхын утгууд

React-н дүрслэх амьдралын мөчлөг дээр формын элементүүдийн value аттрибут нь DOM дээрх утгыг дардаг. Удирдагдаагүй компонент дээр та анхны өгөх утгыг нь тодорхойлох хэрэгтэй бөгөөд дараах шинэчлэлтүүд нь удирдагдаагүй хэвээр үлдэнэ. Иймэрхүү тохиолдлыг хэрэгжүүлэхдээ defaultValue аттрибутыг value-н оронд тодорхойлох нь зүйтэй.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Үүнтэй адилаар <input type="checkbox"> болон <input type="radio"> defaultChecked аттрибут дэмждэг, мөн <select> болон <textarea> defaultValue аттрибут дэмждэг.

Файлын оролтын таг

HTML дээр <input type="file"> таг нь хэрэглэгчийг нэг эсвэл олон файлууд өөрийн төхөөрөмжөөс сонгон сервер лүү илгээх эсвэл Жаваскрипт-н File API дамжин өөрчлөгдөх боломжтой.

<input type="file" />

React дээр <input type="file" /> нь үргэлж удирдагдагдаагүй компонент байдаг бөгөөд програмаар биш хэрэглэгчийн зааж өгсөн утга авдаг учир юм.

Та файлуудтай харилцахийн тулд File API ашиглах хэрэгтэй. Дараах жишээнд хэрхэн DOM зангилаа дээр ref үүсгэж файл руу хандах талаар үзүүлсэн байна:

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

Try it on CodePen