React에서 DOM 요소에 액세스하는 방법은 무엇입니까? React에서 document.getElementById ()와 동등한 것은 무엇입니까?

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를 사용하여 참조를 정의 할 수 있습니다. 함수형 컴포넌트에 ref를 지정할 때 함수형 컴포넌트 useImperativeHandle내에서 특정 함수를 노출 하려면 ref를 DOM 사용 요소로 전달하려면 React.forwardRef를 사용해야 합니다.

전의:

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;

React.createRef () 사용을위한 DOC

편집하다

그러나 문자열 참조에는 몇 가지 문제가 있고 레거시로 간주되며 향후 릴리스 중 하나에서 제거 될 가능성이 있기 때문에 페이스 북은 이에 대해 조언합니다.

문서에서 :

레거시 API : 문자열 참조

이전에 React로 작업 한 경우 ref 속성이 "textInput"과 같은 문자열이고 DOM 노드가 this.refs.textInput으로 액세스되는 이전 API에 익숙 할 수 있습니다. 문자열 참조에는 몇 가지 문제가 있고 레거시로 간주되며 향후 릴리스 중 하나에서 제거 될 수 있기 때문에 권장하지 않습니다. 현재 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을 생성하므로 documment.querySelector 또는 getElementById와 같은 규제 방법을 사용하여 DOM을 참조 할 수 없습니다.

대신 아래 예와 같이 React ref 시스템을 사용하여 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}
             />

        );

}

}