CODEWITHSUNDEEP
reactjsformsinputcomponentssubmit
Aras
Aras

Reputation: 1597

How can get Value from child component in react?

I create a InputComponent and I want to import this component in other component and do submit, but I can't do it. how can I get value from child component in my FormComponent

InputComponent.js

import React, {Component} from 'react';

class InputComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { currentVal: null }
    }

    render() { 
        return ( 
            <div>
                <input  
                    value={this.state.currentVal}
                    onChange={(event) => this.setState({currentVal:event.target.value })}
                   /> 
            </div>
         );
    }
}

export default InputComponent;

FormComponent.js

import React,{Component} from 'react';
import InputComponent from '../../components/common/InputComponent';

class FormComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }


    CallSubmit= (event) => {  
        // how can get username and password ?

        event.preventDefault();
        console.log(event.target.vale)

    }

    render() { 
        return ( 

            <div style={{width:100, height:500, marginTop:100}}>
                <form onSubmit={  this.CallSubmit }>
                    <InputComponent name="username" />
                    <InputComponent name="password" />

                    <button>Send it</button>
                </form>
            </div>
         );
    }
}

export default FormComponent;

Upvotes: 2

Views: 6710

Answers (3)

Tony Bui
Tony Bui

Reputation: 1299

You can create an onChange action on child component, for example here is your FormComponent: Create this function to handle change: 

onChangeUsername(username){
 this.setState({username})
 }

Passing the props to child component:

<InputComponent name="username" onChange = {this.onChangeUsername} />

And in the child component(InputComponent), you can access this props and pass the data to it:

this.props.onChange(event.target.value)

Upvotes: 4

Otavio Augusto
Otavio Augusto

Reputation: 338

In React, data flows one way, from parent to children.

Therefore, you need to have the input' actual states at the FormComponent and pass them as props to the InputComponent, and the function that deals with it at the FormComponent either.

<div>
  <InputComponent 
    input={this.state.username} 
    onChange={this.handleInputChange}
  />
  <InputComponent 
    input={this.state.password} 
    onChange={this.handleInputChange}
  />
</div>

A good article to understand it: https://openclassrooms.com/en/courses/4286486-build-web-apps-with-reactjs/4286721-understand-one-way-data-bindings

Upvotes: 1

Abhishek
Abhishek

Reputation: 1714

move your onChange functions in parent component and store username and password in FormComponent component

Upvotes: 1

Related Questions