为了账号安全,请及时绑定邮箱和手机立即绑定

<input ref={node=>{input=node}}/>的疑问

let AddTodo=({dispatch})=>{

let input;


return (<div>

<from onsubmit={e=>{

e.preventDefault();

if(!input.value.trim()){return}

dispatch(addTodo(input.value))

input.value=""

}}>

<input ref={node=>{input=node}}/>

<button type="submit">

AddTodo

</button>

</div>

)

}

这里的node参数是不是我们在输入框里输入的值啊?然后他传给一个叫input的自定义变量。那他的value属性是怎么来的,为什么{input=node}就可以默认把数据给value属性。

正在回答

7 回答

是的哈,类似jquery

0 回复 有任何疑惑可以回复我~
#1

_莫忘初衷_ 提问者

非常感谢!
2016-12-27 回复 有任何疑惑可以回复我~

非受控组件的调用方式,官方文档提到的ref,可以写成受控的形式

0 回复 有任何疑惑可以回复我~

当一个有 ref 的组件被 mount 的时候,如果 ref 属性是一个函数,如果是,就会调用这个函数。

这个函数就相当于 `node => this.input = node`,node 就是这个 input 元素,也就是说把这个 input 元素记录到成员变量 input 上。以后就可以通过成员变量来获取 input 元素了。

0 回复 有任何疑惑可以回复我~

补充,可以参考http://www.ruanyifeng.com/blog/2015/03/react.html,事实上这里的回调函数取代了本来应该有的事件触发的语句

3 回复 有任何疑惑可以回复我~

楼上2个答的都对,通过回调函数才能让node拿到input的dom元素,然后利用ref的属性可以获取元素的输入

0 回复 有任何疑惑可以回复我~

我也不是很清楚,但是觉得楼上那个不对 

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

ref附带一个回调函数,函数在组件挂载或者卸载的时候立刻调用,

当ref属性用于HTML元素(对应react的component)时,底层的DOM元素会作为参数传给回调函数

这里就是说node这个形参实际接受了input的dom元素,

然后回调函数中将拿到的dom赋值给之前声明的input

3 回复 有任何疑惑可以回复我~

es6新属性,相当于:

const node = this.ref.input

获取元素的

0 回复 有任何疑惑可以回复我~
#1

_莫忘初衷_ 提问者

那node拿到的是真实的inputDOM节点对吗 然后才会有value属性
2016-12-26 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
在React中使用Redux数据流
  • 参与学习       27808    人
  • 解答问题       40    个

在react中使用redux数据流,通过一个样例工程的开发了解具体原理

进入课程

<input ref={node=>{input=node}}/>的疑问

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信