时间戳

首页 > 解决方案 > 问：如何在 react native 中调用需要子参数的函数？

reactjs - 问：如何在 react native 中调用需要子参数的函数？

问题描述

我有一个反应原生应用程序，我需要执行一个函数来更改父组件中的状态。我从一个孩子的孩子那里调用这个函数。

结构看起来像（父->子->子）。

我将函数作为道具传递。我应该如何正确地做到这一点？

谢谢！

标签： reactjsreact-native

解决方案

您可以直接将参数传递给从 props 调用的函数。就像在下面的子组件中使用的 submitHandler 中所做的一样。

家长

import React from 'react';
import {View, Text} from 'react-native';

export default class Parent extends React.Component{
  state={
    name:""
  }
  nameHandler=(userName)=>{
    this.setState({
      name:userName
    })
  }
  render(){
    return (
      <View>
          <Greeting askName={this.nameHandler}/>
         <Text>hello {this.state.name}</Text>
      </View>
    )
  }
}

孩子

import React,{useState} from 'react';
import {View, Button,TextInput} from 'react-native';

export default const Greeting=(props)=>{

  let [userName,setUsername]=useState("");

  const textHandler=(text)=>{
    setUsername(text);
  }

  const sumbmitHandler=()=>{
    props.askName(userName);
  }


  return(
    <View>
      <TextInput placeholder="Enter your name." onChangeText={textHandler}/>
      <Button onPress={sumbmitHandler} title="submit"/>
    </View>
  )

}

推荐阅读