如何在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函数并为我选择的进度栏执行操作。但是我得到的结果是:
You clicked: Progress1 TypeError: document.getElementById(...) is null
如何在react.js中选择特定元素?
您可以通过指定 ref
ref
编辑:
在 React 16.3+中 ,用于React.createRef()创建引用:
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;
使用React.createRef()的DOC
编辑
但是,facebook建议不要这样做,因为字符串引用存在一些问题,被认为是旧问题,并且很可能在将来的发行版中被删除。
从文档:
旧版API:字符串引用 如果您以前使用过React,那么您可能会熟悉一个较旧的API,其中ref属性是一个字符串,例如“ textInput”,并且可以通过this.refs.textInput访问DOM节点。我们建议不要这样做,因为字符串引用存在一些问题,被认为是旧问题,并且很可能在将来的发行版中删除。如果您当前正在使用this.refs.textInput访问引用,则建议改用回调模式。
旧版API:字符串引用
如果您以前使用过React,那么您可能会熟悉一个较旧的API,其中ref属性是一个字符串,例如“ textInput”,并且可以通过this.refs.textInput访问DOM节点。我们建议不要这样做,因为字符串引用存在一些问题,被认为是旧问题,并且很可能在将来的发行版中删除。如果您当前正在使用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使用回调
甚至旧版本的react定义的引用都使用如下字符串
<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在箭头功能块内使用,例如:
this
print = () => { var object = this.refs.Progress1; }
等等…