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

Question

我正在尝试实现 TextInput，但当我需要从中获取文本时，我陷入了困境。我尝试了很多来自其他 Whosebug 问题的选项，但对我没有用。

这是我使用 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:

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

Answer 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>
    );
}

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

How to get value from TextInput using state in react native?

react-native

react-native-textinput

use-state