ตอบสนอง Refs

ตอบสนองต่อการสนับสนุนคุณสมบัติที่พิเศษมากRef คุณสามารถใช้เชื่อมโยงกับการแสดงผล () ในส่วนของการส่งออกใด ๆ

คุณสมบัติพิเศษนี้ช่วยให้คุณสามารถอ้างอิงแสดงผล () ผลตอบแทนตัวอย่างของการสนับสนุนที่สอดคล้องกัน (การสำรองเป็นต้น) เพื่อให้มั่นใจว่าในเวลาใด ๆ อยู่เสมอเพื่อให้ได้ตัวอย่างที่ถูกต้อง

ใช้

ผูกแอตทริบิวต์เตะที่จะทำให้ค่าตอบแทน:

<input ref="myInput" />

ในตัวอย่างรหัสอื่น ๆ ที่จะได้รับการสนับสนุนผ่าน this.refs:

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

ตัวอย่างที่สมบูรณ์

คุณจะได้รับโดยการใช้ในปัจจุบันนี้การตอบสนองการชุมนุมหรือใช้อ้างอิงเพื่อให้ได้องค์ประกอบอ้างอิงตัวอย่างดังต่อไปนี้:

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

ลอง»

ตัวอย่างเช่นเราได้รับการอ้างอิงกับตัวอย่างของการสนับสนุนกล่องใส่ให้คลิกปุ่มเพื่อเข้าสู่เฟรมย่อยได้รับโฟกัส

นอกจากนี้เรายังสามารถใช้ getDOMNode () วิธีการที่จะได้รับองค์ประกอบ DOM