Как создать общую функцию между несколькими компонентами в Reactjs?

Я новичок в Reactjs. Я хочу создать общую функцию между Main.js и RegistrationForm.js, ниже приведены коды.Как создать общую функцию между несколькими компонентами в Reactjs?

Вот мой 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 &nbsp;</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 Я пытаюсь выполнить функцию Close(), которая находится в Main .js.
Спасибо заранее.

источник

2016-06-06 Jayesh Nayak

В ваших Main.js, вы можете передать метод close как prop к SignUpForm

<SignupForm close={this.close} />

А потом в SignupForm, вы можете использовать onClick={this.props.close}

EDIT:

Хотя вышеупомянутое решение будет работать, оно сделает SignupForm компонент не очень многоразовый. Я предлагаю вам вставить код JSX Modal в компонент SignupForm, и он должен контролировать его собственное состояние. Если вы хотите открыть его снаружи, он должен быть опорой на элемент, что-то вроде <SignupForm isOpen={isOpen}>.

источник

2016-06-06 10:35:29

Это работает спасибо! –

Не могли бы вы выслать мне ссылку на Modal JSX. –

Как создать общую функцию между несколькими компонентами в Reactjs?

ответ

Смежные вопросы