如何在 React Native 中使用状态从 TextInput 获取值？

Posted 2023-05-07

【中文标题】如何在 React Native 中使用状态从 TextInput 获取值？

【英文标题】：How to get value from TextInput using state in react native?

【发布时间】：2021-08-19 09:39:04

【问题描述】：

我正在尝试实现 TextInput，但当我需要从中获取文本时，我陷入了困境。 我从其他 *** 问题中尝试了很多选项，但对我没有任何帮助。

这是我使用 TextInput 的代码：

export default class HomeScreen extends Component 
  constructor(props) 
    super(props)
    this.state = 
      text: ''
    ;
  

show = () => 
        console.log(this.state.text)
      

render() 
          return (
            <View>
            <View style=backgroundColor: 'purple', height: '100%'>
                <View>
                  <Button title='test' onPress=this.show></Button>
                  <MyTextInput 
                    btn=1
                    placeholder='test'
                    isDateTime=false
                    onChangeText=(value) => this.setState(text: value)
                    value=this.state.text />
                </View>
                
              </View>
              
          </View>
          )
      

这里是 MyTextInput 代码：

export function MyTextInput(props) 
    const [show, setShow] = useState(false);
    const btn = props.btn;

    const inputType = () => 
        if(props.isDateTime) 
            setShow(true);
        
        else 
            setShow(false);
        
    
    return (
        <View style=btn ? styles.container : styles.container2>
            <TextInput
                style=btn ? styles.input : styles.input2
                ...this.props
                placeholder=props.placeholder
                onFocus=inputType
                showSoftInputOnFocus=props.isDateTime ? false : true />
            show && (
                <DTPicker />
            )
            
        </View>
    );

当我点击按钮时，我得到了这个：

[Info] 06-01 07:24:59.158  6962  7031 I ReactNativeJS: 

我的错误在哪里或者我应该做些什么不同的事情？

【问题讨论】：

这能回答你的问题吗？ react native get TextInput value

不幸的是，没有。我从那里尝试了一些解决方案，但对我没有任何效果。

【参考方案1】：

你需要在TextInput中传递onChangeText=(value) => props.onChangeText(value)

export function MyTextInput(props) 
    const [show, setShow] = useState(false);
    const btn = props.btn;

    const inputType = () => 
        if(props.isDateTime) 
            setShow(true);
        
        else 
            setShow(false);
        
    
    return (
        <View style=btn ? styles.container : styles.container2>
            <TextInput
                onChangeText=(value) => props.onChangeText(value)
                style=btn ? styles.input : styles.input2
                ...this.props
                placeholder=props.placeholder
                onFocus=inputType
                showSoftInputOnFocus=props.isDateTime ? false : true />
            show && (
                <DTPicker />
            )
            
        </View>
    );

【讨论】：

当我这样做时，我有这个错误：TypeError: undefined is not an object (evalating 'this.props')

更改为 props.onChangeText 而不是 this.props.onChangeText

我忘记了，完成了。我很感激，花了很多时间。