无法通过ref访问组件：为何this.workmin.value为undefined？

嘿，我来帮你拆解一下这个问题，大概率是下面几个原因中的一个：

1. 目标组件根本没设置对应的ref属性 #

看你贴出来的代码片段里，只有<Button>和<Text>组件，完全没看到带有ref="workmin"的目标组件（比如TextInput这类输入组件）。如果workmin是你用来输入的组件，你必须在它上面显式加上ref属性才行，比如：

<TextInput ref="workmin" onChangeText={this.captureInput} />

没有这个声明的话，this.refs.workmin自然就是undefined，更别说.value了。

2. 访问ref的时机太早，组件还没挂载完成 #

如果你的captureInput方法在组件还没完全挂载好的时候就被调用了（比如在componentWillMount里触发，或者渲染初期就执行），这时候React还没把组件实例/DOM节点挂载到refs对象里，取值自然会是undefined。

你可以先在componentDidMount生命周期里打印一下this.refs.workmin，确认组件挂载完成后能不能拿到引用：

componentDidMount() {
  console.log('组件挂载完成时的ref:', this.refs.workmin);
}

3. 混淆了React Native组件的特性 #

你用的是React Native，它的组件和Web端React有区别：如果workmin是原生的TextInput，那它确实有value属性，但如果是你自己写的自定义组件，this.refs.workmin拿到的是组件实例，要是你的自定义组件没把value作为实例属性暴露出来，那你访问.value就会得到undefined。

这种情况下，要么在自定义组件内部把value属性暴露出来，要么用forwardRef把引用传递到组件内部的原生输入组件上。

4. 用了过时的字符串ref语法 #

虽然你用的this.refs字符串ref在类组件里还能运行，但React官方早就不推荐这种写法了，更推荐回调ref或者createRef（React 16.3+），这两种方式更可靠，也更容易排查问题：

回调ref写法： #

<TextInput ref={(input) => { this.workmin = input; }} />
// 访问值的时候用 this.workmin.value

createRef写法： #

constructor(props) {
  super(props);
  this.workmin = React.createRef();
}

// 渲染组件时
<TextInput ref={this.workmin} />

// 访问值的时候用 this.workmin.current.value

内容的提问来源于stack exchange，提问作者DCR