จะเข้าถึงองค์ประกอบ DOM ใน React ได้อย่างไร อะไรคือความเท่าเทียมกันของ document.getElementById () ใน React

ฉันจะเลือกแท่งบางอย่างใน react.js ได้อย่างไร

นี่คือรหัสของฉัน:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

ฉันต้องการใช้ส่วนประกอบ React นี้:

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

ฉันต้องการเรียกใช้งานฟังก์ชัน handleClick10 และดำเนินการสำหรับแถบความคืบหน้าที่เลือกไว้ แต่ผลลัพธ์ที่ฉันได้รับคือ:

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

ฉันจะเลือกองค์ประกอบบางอย่างใน react.js ได้อย่างไร

คุณสามารถทำได้โดยระบุ ref

แก้ไข:ในการตอบสนอง v16.8.0 ด้วยองค์ประกอบการทำงานคุณสามารถกำหนดการอ้างอิงด้วย useRef โปรดทราบว่าเมื่อคุณระบุการอ้างอิงในองค์ประกอบการทำงานคุณจะต้องใช้ React.forwardRef เพื่อส่งต่อการอ้างอิงไปยังองค์ประกอบ DOM ของการใช้งานuseImperativeHandleเพื่อแสดงฟังก์ชั่นบางอย่างจากภายในองค์ประกอบการทำงาน

Ex:

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

แก้ไข:

ในการตอบสนอง 16.3+ให้ใช้React.createRef()เพื่อสร้างการอ้างอิงของคุณ:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

เพื่อเข้าถึงองค์ประกอบให้ใช้:

const node = this.myRef.current;

DOC สำหรับการใช้ React.createRef ()

แก้ไข

อย่างไรก็ตาม facebook แนะนำว่าเพราะข้อความอ้างอิงมีปัญหาบางอย่างถือเป็นมรดกและมีแนวโน้มที่จะถูกลบออกในหนึ่งในอนาคต

จากเอกสาร:

Legacy API: การอ้างอิงสตริง

หากคุณเคยทำงานกับ React มาก่อนคุณอาจคุ้นเคยกับ API รุ่นเก่าที่มีการอ้างอิงแอตทริบิวต์เป็นสตริงเช่น "textInput" และเข้าถึงโหนด DOM เป็น this.refs.textInput เราแนะนำต่อเนื่องจากการอ้างอิงสตริงมีปัญหาบางอย่างถือเป็นมรดกและมีแนวโน้มที่จะถูกลบออกในหนึ่งในรุ่นที่ออกในอนาคต หากคุณกำลังใช้งานอยู่ในปัจจุบันนี้ฟอร์แมทข้อความอินพุตเพื่อเข้าถึงการอ้างอิงเราขอแนะนำรูปแบบการโทรกลับแทน

วิธีที่แนะนำสำหรับReact 16.2 และรุ่นก่อนหน้าคือการใช้รูปแบบการโทรกลับ:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC สำหรับการใช้โทรกลับ

แม้แต่การอ้างอิงแบบตอบกลับที่กำหนดรุ่นเก่าโดยใช้สตริงเหมือนด้านล่าง

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

เพื่อให้ได้องค์ประกอบเพียงแค่ทำ

var object = this.refs.Progress1;

จำไว้ว่าให้ใช้thisภายในบล็อกฟังก์ชั่นลูกศรเช่น:

print = () => {
  var object = this.refs.Progress1;  
}

และอื่น ๆ ...

เพื่อให้ได้องค์ประกอบในreactคุณจำเป็นต้องใช้refและภายในฟังก์ชั่นที่คุณสามารถใช้ReactDOM.findDOMNodeวิธีการ

แต่สิ่งที่ฉันชอบทำมากกว่าคือโทรหาผู้อ้างอิงในงาน

<input type="text" ref={ref => this.myTextInput = ref} />

นี่คือลิงค์ที่ดีที่จะช่วยคุณค้นหา

คุณสามารถแทนที่

document.getElementById(this.state.baction).addPrecent(10);

กับ

this.refs[this.state.baction].addPrecent(10);


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>

เนื่องจาก React ใช้รหัส JSX เพื่อสร้าง HTML เราไม่สามารถอ้างอิง dom โดยใช้วิธีการควบคุมเช่น documment.querySelector หรือ getElementById

แต่เราสามารถใช้ระบบ Ref React เพื่อเข้าถึงและจัดการ Dom ดังแสดงในตัวอย่างด้านล่าง:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}