web-dev-qa-db-fra.com

Comment accéder à un élément DOM dans React? Quel est l’équivalent de document.getElementById () dans React

Comment sélectionner certaines barres dans react.js?

Ceci est mon code:

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

Je souhaite utiliser ce composant 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>
        )
    }
});

Je veux exécuter la fonction handleClick10 et effectuer l'opération pour la barre de progression sélectionnée. Mais le résultat obtenu est:

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

Comment sélectionner un élément dans react.js?

javascriptreactjsgetelementbyid
118
user504909

Vous pouvez le faire en spécifiant le 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"/>

Afin d'obtenir l'élément juste faire

var object = this.refs.Progress1;

N'oubliez pas d'utiliser this à l'intérieur d'un bloc de fonction flèche comme:

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

etc...

EDIT

Toutefois, Facebook le déconseille, car les références de chaîne ont quelques problèmes, sont considérées comme héritées et risquent d'être supprimées dans l'une des prochaines versions.

De la docs:

API héritée: références de chaîne

Si vous avez déjà travaillé avec React auparavant, vous connaissez peut-être une ancienne API dans laquelle l'attribut ref est une chaîne, comme "textInput", et le nœud DOM est accessible sous la forme this.refs.textInput. Nous vous le déconseillons car les références de chaîne présentent certains problèmes, sont considérées comme héritées et risquent d'être supprimées dans l'une des prochaines versions. Si vous utilisez actuellement this.refs.textInput pour accéder aux références, nous vous recommandons le modèle de rappel.

Une méthode recommandée pour React 16.2 et les versions antérieures consiste à utiliser le modèle de rappel:

<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 pour utiliser le rappel

Dans Réagissez 16.3 + , utilisez React.createRef() pour créer votre réf:

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

Pour accéder à l'élément, utilisez:

const node = this.myRef.current;

DOC pour l'utilisation de React.createRef ()

134
Shubham Khatri

Pour obtenir l'élément dans react, vous devez utiliser ref et à l'intérieur de la fonction, vous pouvez utiliser la méthode ReactDOM.findDOMNode.

Mais ce que j'aime faire plus, c'est appeler l'arbitre juste à l'intérieur de l'événement.

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

Ceci est un bon lien pour vous aider à comprendre.

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

22
EQuimper

Vous pouvez remplacer

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

par

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


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>
6
Piyush.kapoor