javascript - 如何使用 Button 将函数从一个组件调用到另一个组件
问题描述
我Submit()
在一个具有名称的组件中创建了一个函数,formSignup.js
并创建了另一个名称buttonSubmit.js
包含 Button(onPress) 的组件,该按钮我想调用Submit()
f 中的函数ormSignup.js
。
为提交按钮创建单独组件的原因是,我为动画编写了很多代码,并且我想在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>
);
解决方案
在你的情况下,我有一个疑问。
您在 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>
)
}
推荐阅读
- java - 线程“主”java.time.format.DateTimeParseException 中的异常
- npm - IBM 区块链平台 Visual Studio Code:打包智能合约时出错
- angular - 如何在 Angular 中使用 JSON 模式创建动态选择列表
- linux - 如何为 DPDK 和 malloc 选择大页面大小?
- regex - 正则表达式大写仅用于 2 个字符
- ruby-on-rails - Rails 检查文本中的多个单词作为查询
- neo4j - 使用任意长文章文本查询 lucene 索引以检查文章中的所有匹配项(通过 neo4j)
- scikit-learn - 高斯过程回归器的 SHAP 值为零
- google-analytics - Google Log Stackdriver 接收器/路由器
- php - 如何使用自定义字段中的复选框过滤选项?