bereaksi Refs

Bereaksi untuk mendukung properti sangat istimewaRef, yang dapat digunakan untuk mengikat ke render () pada setiap komponen output.

Properti khusus ini memungkinkan Anda untuk referensi render () mengembalikan sebuah instance dari dukungan yang sesuai (back misalnya). Hal ini memastikan bahwa setiap saat selalu mendapatkan contoh yang benar.

penggunaan

Mengikat atribut ref untuk membuat nilai kembali:

<input ref="myInput" />

Dalam contoh kode lain untuk mendapatkan dukungan melalui this.refs:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

contoh lengkap

Anda bisa mendapatkan dengan menggunakan arus ini Bereaksi perakitan, atau menggunakan ref untuk mendapatkan komponen referensi, contoh adalah sebagai berikut:

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

Coba »

Misalnya, kita mendapatkan referensi ke sebuah contoh dari dukungan kotak input, klik tombol untuk memasukkan sub-frame mendapat fokus.

Kami juga dapat menggunakan metode getDOMNode () untuk mendapatkan elemen DOM