React-Native：将 TextInput 的值传递给函数

Question

我正在尝试将 TextInput 的值传递给 let bytes = buildUrlPayload('https://www.google.co.uk');，以便 url 可以在应用程序中动态写入。谁能帮我实现这个目标？谢谢

function buildUrlPayload(valueToWrite) {
        return Ndef.encodeMessage([
            Ndef.uriRecord(valueToWrite),
        ]);
    }
    
    class AppV2Ndef extends React.Component {
      constructor(props){
        super(props)
    
        this.state = {
          log: "Ready...",
          text: ""
        }
      }
      componentDidMount() {
        NfcManager.start();
      }
    
      componentWillUnmount() {
        this._cleanUp();
      }

      onChangeText = (text) => {
        this.setState({
          text
        })
  }
  
    
      render() {
        return (
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={{padding: 20}}>
          <Text style={styles.text_footer}>Web</Text>
            <View style={styles.action}>
            <Ionicons name="globe-outline" color="#05375a" size={20} />
            <TextInput
                placeholder="URL"
                style={styles.textInput}
                autoCapitalize="none"
                autoCorrect="false"
                onChangeText={this.onChangeText}
                
            />

        </View>
     
             
        <TouchableOpacity 
        style={{padding: 10, width: 200, margin: 20, borderWidth: 1, borderColor: 'black'}}
        onPress={this._URLNdef}
      >
        <Text>Write to Tag</Text>
      </TouchableOpacity>

     
      _cleanUp = () => {
        NfcManager.cancelTechnologyRequest().catch(() => 0);
      }
    
      _URLNdef = async () => {
        try {
          let resp = await NfcManager.requestTechnology(NfcTech.Ndef, {
            alertMessage: 'Ready SparX Magic!'
          });
          console.warn(resp);
          let ndef = await NfcManager.getNdefMessage();
          console.warn(ndef);
          let bytes = buildUrlPayload('https://www.google.co.uk');
          await NfcManager.writeNdefMessage(bytes);
          console.warn('successfully write ndef');
          await NfcManager.setAlertMessageIOS('Get in there it works!');
          this._cleanUp();
        } catch (ex) {
          console.warn('ex', ex);
          this._cleanUp();
        }
      }

export default AppV2Ndef;

Answer 1

您正在将文本输入中的值保存到您的状态中，以便您可以像这样访问它：

let bytes = buildUrlPayload(this.state.text);

您还需要将文本状态添加到文本输入中，以确保它不会在用户键入时消失：

        <TextInput
            placeholder="URL"
            style={styles.textInput}
            autoCapitalize="none"
            autoCorrect="false"
            onChangeText={this.onChangeText}
            value={this.state.text}/>

React-Native：将 TextInput 的值传递给函数

React-Native: Passing the value of a TextInput to a function

react-native

event-handling

nfc

textinput

react-native-nfc-manager