Как получить доступ к элементу DOM в React? Что такое равнозначность документа.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 и выполнить операцию для выбранного мной progressbar.
Но результат, который я получаю, таков: 



 You clicked:  Progress1

 TypeError: document.getElementById(...) is null


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

2599   3  

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

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

Устаревший API: String Refs

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

В React 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;

Док за использование React.createRef()

83  
2018-04-18 21:42:06

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

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

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

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

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

17  
2018-06-09 12:09:01

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

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

By 

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


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>
4  
2016-06-29 11:20:58

Comments

    Ничего не найдено.
Click here to cancel reply.