Wie erstelle ich eine gemeinsame Funktion zwischen mehreren Komponenten in Reactjs?

Ich bin neu in Reactjs. Was ich tun möchte, ist eine gemeinsame Funktion zwischen Main.js und SignupForm.js zu erstellen, unten sind die Codes.Wie erstelle ich eine gemeinsame Funktion zwischen mehreren Komponenten in Reactjs?

Hier ist mein index.html Code:

<!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>

Hier ist meine main.js, die Hauptkomponente in dem das ReactDOM Rendering erfolgt:

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'));

Und meine andere Komponente SignupForm.js Code:

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;

Aus meiner SignupForm.js ich versuche, die Funktion close(), die in Main auszuführen .js.
Vielen Dank im Voraus.

Quelle

2016-06-06 Jayesh Nayak

In Ihrem main.js, können Sie die close Methode als prop zum SignUpForm

<SignupForm close={this.close} />

Und dann in SignupForm, können Sie onClick={this.props.close}

EDIT passieren:

Obwohl die obige Lösung funktioniert, wird es diemachenKomponente nicht sehr wiederverwendbar. Ich schlage vor, Sie würden den Modal JSX Code in die SignupForm Komponente einfügen, und es sollte seinen eigenen Zustand steuern. Wenn Sie es von außen öffnen möchten, sollte es eine Stütze auf dem Element sein, so etwas wie <SignupForm isOpen={isOpen}>.

Quelle

2016-06-06 10:35:29

Es funktioniert dank !! –

Kannst du mir bitte einen Link zu Modal JSX schicken? –

Wie erstelle ich eine gemeinsame Funktion zwischen mehreren Komponenten in Reactjs?

Antwort

Verwandte Themen