Question

我在一个名称为Submit()的组件中创建了一个formSignup.js函数，并创建了另一个名称为buttonSubmit.js的组件，其中包含一个带有Button（onPress）的按钮，我想调用{{1 }}函数位于f Submit()中。

为“提交”按钮创建单独的组件的原因是，我编写了许多动画代码，而且我想在ormSignup.js中重新使用该按钮。

formSignup.js

loginComponent.js

buttonSubmit.js

submit = () => {
...
}

Answer 1

就您而言，我对此表示怀疑。

您是否在formSignup.js组件内使用buttonSubmit.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>
    )
}

如果否，则应单独编写该函数并将其导入ButtonSubmit.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>
    )
}

Answer 2

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

<buttonSubmit onSubmit={this.submit} />

在您的buttonSubmit.js内部，您可以从道具中调用它。

//inside somewhere inside buttonSubmit you call:
this.props.onSubmit();

如何使用Button从一个组件调用功能到另一个组件

2 个答案: