Làm cách nào để truy cập phần tử DOM trong React? Điểm cân bằng của document.getEuityById () trong React là gì

Làm cách nào để chọn một số thanh nhất định trong Reac.js?

Đây là mã của tôi:

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

Tôi muốn sử dụng thành phần React này:

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

Tôi muốn thực thi chức năng handleClick10 và thực hiện thao tác cho thanh tiến trình đã chọn của mình. Nhưng kết quả tôi nhận được là:

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

Làm cách nào để chọn Phần tử nhất định trong Reac.js?

Bạn có thể làm điều đó bằng cách chỉ định ref

EDIT: Trong phản ứng v16.8.0 với thành phần chức năng, bạn có thể định nghĩa một ref với useRef. Lưu ý rằng khi bạn chỉ định một tham chiếu cho một thành phần chức năng, bạn cần sử dụng React.forwardRef trên nó để chuyển tiếp tham chiếu đến phần tử DOM sử dụng useImperativeHandleđể hiển thị một số chức năng từ bên trong thành phần chức năng

Ví dụ:

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

BIÊN TẬP:

Trong React 16.3+ , sử dụng React.createRef()để tạo ref của bạn:

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

Để truy cập phần tử, sử dụng:

const node = this.myRef.current;

DOC để sử dụng React.createRef ()

BIÊN TẬP

Tuy nhiên, facebook khuyên chống lại nó bởi vì giới thiệu chuỗi có một số vấn đề, được coi là di sản và có khả năng sẽ bị xóa trong một trong những bản phát hành trong tương lai.

Từ các tài liệu:

API kế thừa: Tham chiếu chuỗi

Nếu bạn đã làm việc với React trước đó, bạn có thể quen với một API cũ hơn trong đó thuộc tính ref là một chuỗi, như "textInput" và nút DOM được truy cập như this.refs.textInput. Chúng tôi khuyên bạn nên chống lại nó bởi vì giới thiệu chuỗi có một số vấn đề, được coi là di sản và có khả năng sẽ bị xóa trong một trong các phiên bản tương lai. Nếu bạn hiện đang sử dụng this.refs.textInput để truy cập ref, chúng tôi khuyên bạn nên sử dụng mẫu gọi lại.

Một cách được đề xuất cho React 16.2 trở về trước là sử dụng mẫu gọi lại:

<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 để sử dụng gọi lại

Ngay cả các phiên bản cũ hơn của phản ứng được xác định sử dụng chuỗi như dưới đây

<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"/>

Để có được yếu tố chỉ cần làm

var object = this.refs.Progress1;

Hãy nhớ sử dụng thisbên trong một khối chức năng mũi tên như:

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

và như thế...

Để có được phần tử trong reactbạn cần sử dụng refvà bên trong hàm bạn có thể sử dụng ReactDOM.findDOMNodephương thức.

Nhưng những gì tôi muốn làm nhiều hơn là gọi cho ref ngay trong sự kiện

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

Đây là một số liên kết tốt để giúp bạn tìm ra.

Bạn có thể thay thế

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

với

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


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

Vì React sử dụng mã JSX để tạo HTML, chúng tôi không thể tham chiếu dom bằng các phương thức quy định như documment.querySelector hoặc getEuityById.

Thay vào đó, chúng ta có thể sử dụng hệ thống ref React để truy cập và thao tác với Dom như trong ví dụ dưới đây:

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}
             />

        );

}

}