react-native - 如何使用 useRef 获取 TextInput 值？

Question

我尝试获取 TextInput 的值

useRef

但它给出了未定义的。这是我的代码:

const inputRef = useRef(null);
 <TextInput
     ref={inputRef}
     value={'test'}
     editable={false}
     style={styles.InputStyle}
 />
console.log(inputRef.current.value)  --->   gives undefined

Answer 1

如果你想访问 TextInput 的值，你最好使用状态 https://facebook.github.io/react-native/docs/state.html作为以下功能组件:

  const [inputValue,setInputValue] = React.useState('');
  //Getting state value
  console.log(inputValue);
  return (
   //Setting state Value using setInputValue
    <View>
      <TextInput placeholder="Test" onChangeText={(value)=>setInputValue(value)}/>
    </View>
  )

有状态组件示例:

 state = {
        inputValue: '',
    };

render(){
  //Using state value
  console.log(this.state.inputValue);
  return (
  //Setting state value
    <View>
      <TextInput placeholder="Test" onChangeText={(value)=>this.setState({inputValue: value})}/>
    </View>
  )
}

如果你想对输入使用 ref 你应该使用 useRef Hook:

export default function App() {
  const refForInput = useRef(null);

  const printValueOfInputUsingRef = () => {
    //to get the value u from a ref you should access it via 
    //ref.current.value object
    console.log(refForInput.current.value);
  }
  return (
    <View>
      <TextInput ref={refForInput} value={'Some Value'}/>
      <Button onPress={handleOnPress}>Show The Value</Button>
    </View>
  );
}