React - can a child component send a value back to the parent form

Question

InputField and Button are custom components that go into the form to create the form. My problem is how to send the data back to the form, so that when I click the button, I can start ajax in the data form (username and password):

 export default auth.authApi( class SignUpViaEmail extends Component{ constructor(props){ super(props); this.state = { email : "", password : "" }; this.storeEmail = this.storeEmail.bind( this ); this.storePassword = this.storePassword.bind( this ); } storeEmail(e){ this.setState({ email : e.target.value }); } storePassword(e){ this.setState({ password : e.target.value }); } handleSignUp(){ this.props.handleSignUp(this.state); } render(){ return( <div className="pageContainer"> <form action="" method="post"> <InputField labelClass = "label" labelText = "Username" inputId = "signUp_username" inputType = "email" inputPlaceholder = "registered email" inputClass = "input" /> <Button btnClass = "btnClass" btnLabel = "Submit" onClickEvent = { handleSignUp } /> </form> </div> ); } } ); 

Or is this not recommended, and I should not create custom child components in the form?

child component => InputField

 import React, { Component } from "react"; export class InputField extends Component{ constructor( props ){ super( props ); this.state = { value : "" }; this.onUserInput = this.onUserInput.bind( this ); } onUserInput( e ){ this.setState({ value : e.target.value }); this.props.storeInParentState({[ this.props.inputType ] : e.target.value }); } render(){ return <div className = ""> <label htmlFor = {this.props.inputId} className = {this.props.labelClass}> {this.props.labelText} </label> <input id = {this.props.inputId} type = {this.props.inputType} onChange = {this.onUserInput} /> <span className = {this.props.validationClass}> { this.props.validationNotice } </span> </div>; } } 

Error: I get an e.target is undefined error message in the parent repository of Email func.

Answer 1

The reaction of a one-way data binding model means that child components cannot send values ​​back to parent components unless explicitly allowed to do so . The reagent way to do this is to pass the callback to the child component (see Facebook Forms) .

 class Parent extends Component { constructor() { this.state = { value: '' }; } //... handleChangeValue = e => this.setState({value: e.target.value}); //... render() { return ( <Child value={this.state.value} onChangeValue={this.handleChangeValue} /> ); } } class Child extends Component { //... render() { return ( <input type="text" value={this.props.value} onChange={this.props.onChangeValue} /> ); } } 

Note that the parent component processes the state, and the child component only processes . The Facebook Lift Up Guide is a good resource for learning how to do this.

Thus, all the data is stored in the parent component (in state), and only the way to update this data is provided to the child components (callbacks are passed as details) . Now your problem has been resolved: your parent component has access to all the required data (since the data is stored in state), but your child components are responsible for binding the data to its individual elements, such as <input> .

Answer 2

You can add a “link name” to your InputField so that you can call some function from it, for example:

 <InputField ref="userInput" labelClass = "label" labelText = "Username" inputId = "signUp_username" inputType = "email" inputPlaceholder = "registered email" inputClass = "input" /> 

So, you can access it using the links:

 this.refs.userInput.getUsernamePassword(); 

If the getUsernamePassword function is inside the InputField component, and with a return, you can set the state and call your props.handleSignUp