关于this.input的困惑
来源：4-7 React 中 ref 的使用
精雕慕刻
2018-07-27
老师讲的真好，不过在听4-7节的4:05时，对于代码里29行this.input的意义有点不太理解：
根据代码27、28行来参考，this应该是指TodoList这个组件吧，然后this.input的input应该也是指TodoList组件里的input的吧？但是TodoList里并没有实现声明这个变量，所以不知道此处是按照JS的语法自动在使用时直接默认声明为var变量，还是因为TodoList里的render里包含了<input>节点所以指代该节点而不需要声明？（如果原因是后者，我可不可以理解为，我可以直接使用this.label来指代<label>节点？）
学生才疏学浅，还请老师多多指教。
写回答
5回答
-
代码贴上来我看一下
042018-07-30 -
我问题有点大
2018-08-06
理解了 ref={(input)=>{this.input=input}} 箭头函数里的参数指向input这个dom节点， this.input 意思是设置一个input属性 让这个属性值等于 箭头函数的参数，即input属性指向input这个DOM节点
所以可以写成 {(input)=>{this.propName=input}} 箭头函数 参数名字也可以随便起
10 -
精雕慕刻
提问者
2018-07-27
class TodoList extends Component { //省略其它function render() { return ( <div> <div> <label htmlFor='insertArea'>please input todo item ?</label> <input id='insertArea' value={this.state.inputValue} onChange={this.handleInputChange} ref={(input)=>{this.input=input}} //这一行的this.input是一个之前未声明而直接拿来用的变量吧？ /> <button onClick={this.handleBtnClick}>add</button> </div> <ul> { this.getTodoItemList() } </ul> </div> ); } //省略其它function }112018-08-01 -
自驱动
2019-12-31
class Com extends Component { render(){ <input ref={x=>{this.attr= x;}} /> // this = Com // ref回调函数 执行的时机是didMount后，参数为该组件的具体实例， // 即x就是实例，即this.attr就是实例 <button onClick={this.handleClick}> btn </button> // this = Com } handleClick = () => { console.log(this.attr.value); // this = Com // this.attr = <input /> }; }00 -
我问题有点大
2018-08-06
如果我有两个input呢。。
00
相似问题