我是 Reactjs 的新手。我想做的是在 Main.js 和 SignupForm.js 之间创建一个通用函数，下面是代码。
这是我的 index.html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<div id="app"></div>
<script src="../assets/js/jquery.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
这是我的 Main.js，完成 ReactDOM 渲染的主要组件:
var React = require('react');
var ReactDom = require('react-dom');
var SignupForm = require('./SignupForm.js');
var Modal = require('react-bootstrap/lib/Modal');
var Main = React.createClass({
getInitialState() {
return { showModal: false};
},
close() {
this.setState({ showModal: false });
},
open() {
this.setState({ showModal: true });
},
render: function () {
return (
<div>
<button className="btn-block btn btn-lg btn-info" onClick={this.open}> Open </button>
<Modal show={this.state.showModal} onHide={this.close} bsSize="small" aria-labelledby="contained-modal-title-sm" enforceFocus >
<Modal.Header closeButton>
<Modal.Title className="text-center tb_spacing">Sign up free to connect with the
right one</Modal.Title>
<SignupForm />
</Modal.Header>
</Modal>
<div>
);
}
});
ReactDOM.render(<Main/>, document.getElementById('app'));
我的另一个组件 SignupForm.js 代码是:
var React = require('react');
var SignupForm = React.createClass ({
render : function() {
return (
<form id="signup">
<div className="form-group" id="formControlsEmail">
<label className="control-label">Email</label>
<input type="email" className="form-control" placeholder="Enter email" id="layer_email"/>
</div>
<div className="form-group" id="formControlsPassword">
<label className="control-label">Password</label>
<input type="password" className="form-control" placeholder="Enter password" id="layer_password1"/>
</div>
<div className="form-group">
<label className="control-label">Gender </label>
<label className="radio-inline" >
<input type="radio" name="male" />
Male
</label>
{' '}
<label className="radio-inline" >
<input type="radio" name="female" />
Female
</label>
{' '}
</div>
<button type="submit" className="btn-block btn btn-lg btn-info" onClick={this.close}>
Next
</button>
</form>
)
}
});
module.exports = SignupForm;
我试图从我的 SignupForm.js 中执行 Main.js 中的函数 close()。
提前谢谢你。
最佳答案
在您的 Main.js 中，您可以传递 close方法作为 prop到 SignUpForm
<SignupForm close={this.close} />
然后在SignupForm , 你可以使用 onClick={this.props.close}
编辑:
虽然上述解决方案可行，但它会使 SignupForm组件不是很可重用。我建议你插入 Modal JSX代码放入SignupForm组件，它应该控制它自己的状态。如果你想从外部打开它，它应该是元素上的一个 Prop ，比如 <SignupForm isOpen={isOpen}> .
关于javascript - 如何在 Reactjs 中创建多个组件之间的公共(public)功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37655190/