在React .js中有没有类似于javascript.getElementById()的函数？

发布时间：2020-12-15 20:42:15 所属栏目：百科来源：网络整理

导读：我想在3个酒吧中选择某些酒吧在react.js中怎么做？这是我的代码： var Progressbar = React.createClass({getInitialState: function() {return {completed:this.props.completed};},addPrecent: function(value){this.props.completed+=value;this.setStat

我想在3个酒吧中选择某些酒吧在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 (...);
}

我想使用这个反应组件：

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中选择某个元素？

你可以通过指定参考文献来做到这一点

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

等等…

编辑

然而,Facebook建议反对它,因为字符串引用有一些问题,被认为是遗产,并且可能会在以后的版本中删除.

推荐的方法是使用回调模式

我希望它有帮助

<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 for using callback

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!