DOM操作
1、findDOMNode()
- 当组件加载到页面上之后(mounted),可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。
findDOMNode() 不能用在无状态组件上。
import { findDOMNode } from 'react-dom';
2、Refs
- 另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称,然后通过 this.refs.name 来访问对应的 DOM 元素。
因为无状态组件没有实例,所以 ref 不能设置在无状态组件上
class App extends Component {
constructor() {
return { userInput: '' };
}
handleChange(e) {
this.setState({ userInput: e.target.value });
}
clearAndFocusInput() {
this.setState({ userInput: '' }, () => {
this.refs.theInput.focus();
});
}
render() {
return (
<div>
<div onClick={this.clearAndFocusInput.bind(this)}>
Click to Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange.bind(this)}
/>
</div>
);
}
}
3、总结
- 可以使用 ref 获取组件定义的任何公共方法,比如 this.refs.myTypeahead.reset()
- Refs 是访问到组件内部 DOM 节点唯一可靠的方法
- Refs 会自动销毁对子组件的引用(当子组件删除时)
4、注意事项
- 不要在 render 或者 render 之前访问 refs
- 不要滥用 refs