Refs属性不能传递
因为并不是像
key
一样,refs
是一个伪属性,React
对它进行了特殊处理。
如果你向一个由高级组件创建的组件的元素添加ref
应用,那么ref
指向的是最外层容器组件实例的,而不是包裹组件。
但有的时候,我们不可避免要使用refs
,官方给出的解决方案是:
传递一个ref回调函数属性,也就是给ref应用一个不同的名字
这里主要讲解获取自定义控件的坐标,这种项目中实际涉及用到的需求使用说明
定义ref的两种写法:
1.ref = {ref_phoneInput => (this.ref_phoneInput = ref_phoneInput)}
2.ref = {'ref_phoneInput'}
相应的,取出ref指向的组件的两种写法:
1.this.currentInput = this.ref_phoneInput.refs.PhoneNumberInput;
2.this.currentInput = this.refs.ref_phoneInput.refs.PhoneNumberInput;
理解this的指向问题
理解示例2
ref : 指向某个子组件
this : 指向当前export的组件本身,
this.refs : 指向当前export的组件的所有子组件
this.refs.ref_phoneInput : 指向当前import的自定义封装组件
this.refs.ref_phoneInput.refs : 指向当前import的自定义封装组件的所有子组件
this.refs.ref_phoneInput.refs.PhoneNumberInput : 指向当前import的自定义封装组件的其中一个子组件
//定义
<PhoneInput
placeHolder={'请输入手机号'}
ref={'ref_phoneInput'}
style={styles.input}
onChangeText={this.onChangeTextOfPhoneInput.bind(this)}
onFocus={this.onFocusOfPhoneInput.bind(this)}
/>
//使用
onFocusOfPhoneInput() {
this.currentInput = this.refs.ref_phoneInput.refs.PhoneNumberInput;
if (Platform.OS === 'android') {
this.ref_pwdInput.closeKeyBoard();
this.ref_VerifyCodeInput.closeKeyBoard();
}
}
//计算结果
keyboardWillShow(event) {
let keyboardHeight = event.endCoordinates.height;
this.currentInput.measure((ox, oy, width, height, px, py) => {
if (py + height + keyboardHeight > AppUtils.getScreenHeight()) {
var top = AppUtils.getScreenHeight() - (py + height + keyboardHeight) - 20;
Animated.timing(this.state.marginTop, {
toValue: top,
duration: event.duration,
easing: Easing.linear
}).start();
}
});
}