如何修改从一个组件传递到另一组件的道具并将其发送回去?

时间:2019-07-15 15:53:42

标签: react-native state react-navigation textinput

我正在从一个组件(scan.js)扫描qrcode,然后将扫描的数据发送到文本输入字段中的另一组件(传输),我想使文本输入字段可编辑。

在扫描组件中,我创建了一个状态,其中保存了来自qrcode的数据,然后创建了一个传递参数的胖箭头函数。函数主体将参数数据保存到使用this.setState创建的状态。我将状态和函数传递给this.props.navigation.navigate作为Transfer组件的参数。

在渲染组件中的传输组件中,我分别使用this.props.navigation.getparams将状态和函数存储在变量中。然后在textinput字段中,textinput的值等于存储扫描组件状态的变量,并且每当触发onchangetext时,我就将创建on胖文本函数的胖箭头函数的参数值分配给存储传递给函数的变量来自扫描组件。

In scan.js:

the callback function is:

 HandlingCallback=(b) =>{
        this.setState({Message :b});
    }

this.props.navigation.navigate part:

 Alert.alert(
            'Address: '+e.data,
            'Confirm address?',
            [
                {text: 'Cancel',
                    onPress: () => console.log('Cancel Pressed'),
                    style: 'cancel',
                },
                {text: 'OK', onPress: ()=> {
                        {
                            this.props.navigation.navigate('Send', {Address1: this.state.Message, CallBack:this.HandlingCallback()});
                        }}},
            ],
            {cancelable: false},
        );

In transfer component inside the render:

let addressTemp = this.props.navigation.getParam('Address1','');
 let CallbackFunction = this.props.navigation.getParam('CallBack','');

the textinput portion:

 <TextInput
                                    style={[styles.boxStyle,{width:"96%",justifyContent:"center",alignItems:"center"}]}
                                    placeholder={"Enter address here"}
                                    placeholderTextColor={'rgba(0,0,0,0.35)'}
                                    value= {addressTemp}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={(b)=>{
                                        this.setState({Address: b},()=>{
                                         CallbackFunction = b;
                                        });
                                    }}
                                />

但是文本输入不允许我编辑文本。我认为传递和调用回调函数的方式不正确。尽管从扫描组件发送到传输的状态已成功接收,但功能未成功。有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

TextInput是不可编辑的,因为TextInput的值为public function findAllByUser($user){ $query = $this->_em->createQuery('SELECT rdv.id, i, rdv.creation_date FROM App:Rendezvous rdv JOIN App:Immeuble i WITH rdv.immeuble=i JOIN App:User u WITH u=:user'); $query->setParameter('user', $user); return $query->getResult(); } ,并且在changeText上,您正在设置addressTemp的状态。 确保对TextInput和onchangeText使用相同的Addess来更新value中使用的相同状态。

value

希望这会有所帮助!!