react笔记之refs获取真实的dom节点

责编:menVScode 2017-08-13 16:32 阅读(720)

        在组件中,可以通过refs获取真实的dom节点。

export default class Item extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			inEdit:false,
			val:''
		}
		this.onEdit = this.onEdit.bind(this);
		...
	}

	....

	onEdit(){
		//let value = todo.value; //这种需要传将todo当参数传进来
		let {value} = this.props.todo;
		this.setState({
			inEdit: true,
			val:value
		},function(){
			let {editInput} = this.refs;
			editInput.focus();
		});
		console.log(this.refs);
                console.log(this.refs.editInput);//拿到editInput其对应的input的dom节点
	}
        ....
        componentWillMount(){
                console.log(this.refs.editInput,'will');
        }
        componentDidMount(){

console.log(this.refs.editInput,'did');

}

render(){ let {onEdit,onBlur,onEnter,inputChange} = this; .... return( <li className={itemClassName}> <div className='view'> <input type='checkbox' onChange={(ev)=>{onToggle(ev,todo)}} /> <label onDoubleClick={onEdit} ref='label' >{todo.value}</label> <button className='destroy' ref='btn' onClick={()=>{doDestroy(todo)}}></button> </div> <input ref='editInput' type='text' value={val} /> </li> ) } }

        打印console.log( this.refs ) 的结果:

QQ截图20170813160844

        如果要获取对应的dom节点,通过 this.refs.***** 。

        并不是所有的时候都能拿到dom节点的,至少要等组件挂载之后。因为在组件没有挂载好之前,页面的dom没有被渲染进去,也就拿不到真实的dom了。

        用componentWillMount,componentDidMount两个周期函数来验证,下图可以看到在组件即将要挂载的时候,获取到的是undefined。在挂载后能拿到dom节点。

QQ截图20170813161830

标签: refs react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码