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

Ихэнх тохиолдолд бид форм хэрэгжүүлэхэд удирдагдсан компонентууд хэрэглэхийг зөвлөдөг. Удирдагдсан компонентод формын өгөгдөл нь 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-ын render-ийн мѳчлѳгѳд form дээрх value атрибут нь DOM-ынхаа утгыг дардаг. Удирдагдаагүй компонентын хувьд анхны утгаа зааж өгөөд, дараагийн шинэчлэлтүүдэд дээр тэрийг солихгүй байх шаардлагатай үед та value-ын оронд defaultValue-ийг ашиглах боломжтой юм. Компонент mount хийсний дараа defaultValue-ийг шинэчилбэл DOM дээр ямар ч утга өөрчлөгдөхгүй болно.

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>
    );
  }
}

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

Try it on CodePen