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

Как выбрать определенные бары в react.Джей?

Это мой код:

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 и выполнить операцию для моего выбранного progressbar. Но в результате я получаю:

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

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

3 77
javascript reactjs getelementbyid

3 ответа:

вы можете сделать это, указав 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 советует против этого, потому что string refs имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков.

от документы:

Legacy API: String Refs

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

рекомендуемый способ для реагировать 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() чтобы создать свой ref:

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 ()

83

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

но то, что я хотел бы сделать больше, это вызвать ref прямо внутри события

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

Это хорошая ссылка, чтобы помочь вам понять.

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

17

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

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

by

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


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