Existe-t-il un moyen de transmettre les données de formulaire du composant enfant au composant parent, où les boutons d'envoi ont été conservés dans le composant parent.
REMARQUE: - Je ne veux pas utiliser ref pour cela car la référence serait du gaspillage de tant de mémoire et je pourrais avoir 6-7 enfants dans le parent.
J'ai créé une situation similaire pour montrer sur quoi je suis coincé.
class FirstChildForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="form">
<input type="text" placeholder="Enter your name..." />
<input type="password" placeholder="Enter password" />
</div>
)
}
}
class SecondChildForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="form">
<input type="text" placeholder="Enter your name..." />
<input type="password" placeholder="Enter password" />
</div>
);
}
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
handleSubmit = () => {
}
render() {
return (
<div className="parent">
<FirstChildForm />
<SecondChildForm />
<button onClick={this.handleSubmit}> Submit</button>
</div>
)
}
}
3 Réponses :
Bien sûr, le concept s'appelle soulevant l'état . Fondamentalement, votre composant contiendrait les données des deux composants. Je vais simplifier un peu, mais vous devez comprendre ce que je fais.
FirstChildForm.js
props.updateData ('user', e.target.value)}
SecondChildForm.js
props.updateData ('pass', e.target.value)}
App.js
export default class App extends React.Component {
constructor() {
super();
this.state = {
user: '',
pass: '',
};
}
handleSubmit = () => {};
updateData = (target, value) => {
this.setState({ [target]: value });
};
render() {
return (
<div className="parent">
<FirstChildForm updateData={this.updateData} />
<SecondChildForm updateData={this.updateData} />
<button onClick={this.handleSubmit}> Submit</button>
</div>
);
}
}
Le composant est la source de la vérité. Remarque:
En augmentant l'état, et n'ont plus besoin d'être des composants basés sur des classes, ils peuvent être des composants fonctionnels. Si vous voulez qu'ils restent basés sur les classes pour une raison quelconque, remplacez props.updateData par this.props.updateData , sinon cela ne fonctionnera pas.
Le parent est l'endroit où nous définissons la fonction, l'enfant est l'endroit où nous l'exécutons, en envoyant des données au parent, en gros!
Merci Predrag. Je n'ai pas pensé à obtenir des données de formulaire sur onChange. J'essayais de déclencher un événement dans l'enfant du parent qui prend toutes les données de forme et l'envoie ensuite au parent.
À tout moment! Assurez-vous de donner un peu d'amour au concept, car cela peut vous causer des problèmes lorsque vous commencez à construire des choses de plus en plus grandes. Comme lorsque vous avez des composants imbriqués sur 6 niveaux de profondeur, il est peut-être temps d'envisager le redux!
Vous devrez passer une fonction à vos composants enfants. Vos enfants pourront désormais lier cette fonction de leurs accessoires aux champs donnés.
{
'firstForm': {
'name': '',
'password': ''
},
'secondForm': {
'name': '',
'password': ''
}
}
L'état résultant de votre parent aura la structure suivante:
class FirstChildForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="form">
<input type="text" placeholder="Enter your name..." onChange={this.props.dataChanged('name')}/>
<input type="password" placeholder="Enter password" onChange={this.props.dataChanged('password')}/>
</div>
)
}
}
class SecondChildForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="form">
<input type="text" placeholder="Enter your name..." onChange={this.props.dataChanged('name')}/>
<input type="password" placeholder="Enter password" onChange={this.props.dataChanged('password')}/>
</div>
);
}
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
handleChange = form => field => ev => {
this.setState(prev => ({ [form]: { ...prev[form], [field]: ev.target.value } }))
}
en passant une fonction au composant enfant comme accessoire et en passant l'état du composant enfant en tant que paramètre à la fonction
car je ne sais pas exactement ce que vous voulez coder à l'intérieur mais uniquement pour comprendre la vérification
exemple suivant
parent:
class SecondChildForm extends React.Component{
constructor(props){
super(props);
this.state = {
data:'hello'
}
}
handleDataChange: function () {
var newData = this.state.data
this.props.onSelectData(newData);
},
render(){
return (
<div className="form">
<input type="text" placeholder="Enter your name..." />
<input type="password" placeholder="Enter password" />
<button onclick={this.handleDataChange}>submit</button>
</div>
);
}
}
Enfant:
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: []
}
}
handleSubmit = () => {
}
handleData = (newData) => {
this.setState({data: newData});
}
render(){
return (
<div className="parent">
<FirstChildForm / >
<SecondChildForm onSelectData={this.handleData}/>
<button onClick={this.handleSubmit}> Submit</button>
</div>
)
}
}