Existe uma maneira de passar dados do formulário do componente filho para o componente pai, onde os botões de envio foram mantidos no componente pai.
NOTA: - Não quero usar ref para isso, pois o ref seria um desperdício de muita memória e posso ter de 6 a 7 filhos no pai.
Eu criei uma situação semelhante para mostrar no que estou preso.
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>
)
}
}
Claro, o conceito é chamado de levantamento do estado . Basicamente, seu <App />componente manteria os dados de ambos os componentes. Vou simplificar um pouco, mas você deve entender o que estou fazendo.
FirstChildForm.js
<input type="text" name="username" onChange={e => props.updateData('user', e.target.value)}
SecondChildForm.js
<input type="password" name="password" onChange={e => 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>
);
}
}
O <App />componente é a fonte da verdade. Observe:
Ao elevar o estado, <FirstChildForm />e <SecondChildForm />não precisam mais ser componentes baseados em classe, eles podem ser componentes funcionais. Se você quiser que eles permaneçam na classe por qualquer motivo, mude props.updateDatapara this.props.updateData, senão não funcionará.
O pai é onde definimos a função, o filho é onde a executamos, enviando dados para o pai, basicamente!
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras