Javascript 如何使用按钮将函数从一个组件调用到另一个组件

我在一个名为

formSignup.js

的组件中创建了一个

Submit（）

函数，并创建了另一个名为

buttonSubmit.js

的组件，其中包含一个按钮（onPress），我想用这个按钮调用f

ormSignup.js中的
Submit（）
函数

为Submit按钮创建单独组件的原因是，我为动画编写了很多代码，而且我想在
loginComponent.js
中重复使用该按钮

formSignup.js

submit = () => {
...
}

按钮提交.js

How can i call submit function from  fromSignup.js here

  _onPress() {
    if (this.state.isLoading ) return;

    this.setState({isLoading: true});
    Animated.timing(this.buttonAnimated, {
      toValue: 1,
      duration: 200,
      easing: Easing.linear,
    }).start();

    setTimeout(() => {
      this._onGrow();
    }, 2000);

    setTimeout(() => {
      Actions.mainScreen();
      this.setState({isLoading: false});
      this.buttonAnimated.setValue(0);
      this.growAnimated.setValue(0);
    }, 2300);

  }
-----
return(
          <TouchableOpacity
            onPress={this._onPress}
            activeOpacity={1}>
            {this.state.isLoading ? (
              <Image source={spinner} style={styles.image} />
            ) : (
              <Text style={styles.text}>Go</Text>
            )}
          </TouchableOpacity>
);

在这里如何从fromSignup.js调用submit函数
_onPress（）{
如果（this.state.isLoading）返回；
this.setState（{isLoading:true}）；
动画。计时（此按钮为动画{
toValue:1，
持续时间：200，
放松：放松，线性，
}).start（）；
设置超时（（）=>{
这个；
}, 2000);
设置超时（（）=>{
Actions.mainScreen（）；
this.setState（{isLoading:false}）；
此.ButtonInimated.setValue（0）；
此.growAnimated.setValue（0）；
}, 2300);
}
-----
返回(
{this.state.isLoading(
) : (
去
)}
);
您可以将函数作为道具传递

<buttonSubmit onSubmit={this.submit} />

您可以将函数作为道具传递

<buttonSubmit onSubmit={this.submit} />

就你而言，我有一个疑问

您是否在formSignup.js组件中使用ButtonsSubmit.js组件

如果是，您可以通过将函数作为道具传递来实现

//FormSignup.js
const FormSignup = () =>{
    const submit = () => {
        // some submit logic
    };

  //render
    return (
        <View>
            ....
            // if you are using the ButtonSubmit component in FormSignup.js, you 
            // can get function by props

            <ButtonSubmit onPressButton = {()=>submit()}/>
        </View>
    )
}


//ButtonSubmit.js
const ButtonSubmit = (props) => {
    return (
        <TouchableOpacity onPress={props.onPressButton}>
            <Text>submit</Text>
        </TouchableOpacity>
    )
}

//FormSignup.js
const FormSignup=（）=>{
常量提交=（）=>{
//有些人提交逻辑
};
//渲染
返回(
....
//如果您正在使用FormSignup.js中的ButtonsSubmit组件，则
//可以通过道具获得功能
提交（）}/>
)
}
//ButtonsSubmit.js
常量按钮提交=（道具）=>{
返回(
提交
)
}

如果否，则应单独编写该函数，并将其导入ButtonsSubmit.js组件中

// Utility.js

const submit = () => {
    // submit logic
};

export {submit};

//================================//
//ButtonSubmit.js

import { submit } from './path/Utility.js'  // import the submit method

const ButtonSubmit = () => {
    return (
        <TouchableOpacity onPress={()=>submit()}>
            <Text>submit</Text>
        </TouchableOpacity>
    )
}


//Utility.js
常量提交=（）=>{
//提交逻辑
};
导出{提交}；
//================================//
//ButtonsSubmit.js
从“./path/Utility.js”导入{submit}//导入提交方法
常量按钮提交=（）=>{
返回(
提交（）}>
提交
)
}
对于你的情况，我有一个疑问

您是否在formSignup.js组件中使用ButtonsSubmit.js组件

如果是，您可以通过将函数作为道具传递来实现

//FormSignup.js
const FormSignup = () =>{
    const submit = () => {
        // some submit logic
    };

  //render
    return (
        <View>
            ....
            // if you are using the ButtonSubmit component in FormSignup.js, you 
            // can get function by props

            <ButtonSubmit onPressButton = {()=>submit()}/>
        </View>
    )
}


//ButtonSubmit.js
const ButtonSubmit = (props) => {
    return (
        <TouchableOpacity onPress={props.onPressButton}>
            <Text>submit</Text>
        </TouchableOpacity>
    )
}

//FormSignup.js
const FormSignup=（）=>{
常量提交=（）=>{
//有些人提交逻辑
};
//渲染
返回(
....
//如果您正在使用FormSignup.js中的ButtonsSubmit组件，则
//可以通过道具获得功能
提交（）}/>
)
}
//ButtonsSubmit.js
常量按钮提交=（道具）=>{
返回(
提交
)
}

如果否，则应单独编写该函数，并将其导入ButtonsSubmit.js组件中

// Utility.js

const submit = () => {
    // submit logic
};

export {submit};

//================================//
//ButtonSubmit.js

import { submit } from './path/Utility.js'  // import the submit method

const ButtonSubmit = () => {
    return (
        <TouchableOpacity onPress={()=>submit()}>
            <Text>submit</Text>
        </TouchableOpacity>
    )
}


//Utility.js
常量提交=（）=>{
//提交逻辑
};
导出{提交}；
//================================//
//ButtonsSubmit.js
从“./path/Utility.js”导入{submit}//导入提交方法
常量按钮提交=（）=>{
返回(
提交（）}>
提交
)
}
它们是子组件还是父组件？还是没有链接？我只是像导入提交表单“/fomSingup”一样导入；它们是子组件还是父组件？还是没有链接？我只是像导入提交表单“/fomSingup”一样导入；我在ButtonsSubmit.js中使用fromSingup.js中的submit（）函数，所以您在formSubmit组件中使用ButtonsSubmit，请使用第一种方法，我说。它将完美地工作。如果您被清除，upvote plsI将在按钮submit内使用formSubmit（包含提交功能）@AbdulWahab submit（）{}正确吗？？如果是，您应该使用第二个方法，我说我正在ButtonsSubmit.js中使用fromSingup.js中的submit（）函数。所以您在formSubmit组件中使用ButtonsSubmit，请使用第一个方法，我说。它将完美地工作。如果您被清除，upvote plsI将在按钮submit内使用formSubmit（包含提交功能）@AbdulWahab submit（）{}正确吗？？如果是，你应该使用我说的第二种方法