Как получить доступ к элементу DOM в React? Что такое equilvalent document.getElementById() в реале

Как выбрать определенные бары вact.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

Как мне выбрать определенный элемент вact.js?

Ответ 1

Вы можете сделать это, указав ref

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

и так далее...

EDIT

Однако facebook советует против этого, потому что ссылки на строки имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков.

Из документов:

Legacy API: String Refs

Если вы раньше работали с React, вы можете знаком со старым API, где атрибут ref является строкой, например "textInput", и узел DOM доступен как this.refs.textInput. Мы советую против этого, потому что у строковых ссылок есть некоторые проблемы, которые считаются наследие, и, вероятно, будет удалено в одном из будущих выпусков. Если Вы в настоящее время используете 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 для использования обратного вызова

В Реакте 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()

Ответ 2

Для получения элемента в react вам нужно использовать ref, а внутри функции вы можете использовать метод ReactDOM.findDOMNode.

Но что мне нравится делать, так это вызывать реф прямо на мероприятии

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

Это хорошая ссылка, которая поможет вам разобраться.

https://facebook.github.io/react/docs/refs-and-the-dom.html

Ответ 3

Вы можете заменить

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

по

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


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

Ответ 4

Поскольку React использует код JSX для создания HTML, мы не можем ссылаться на dom, используя методы регулирования, такие как documment.querySelector или getElementById.

Вместо этого мы можем использовать систему 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}
             />

        );

}

}