Как можно получить значение от дочернего компонента в реакции? - PullRequest
Новая
       28

Как можно получить значение от дочернего компонента в реакции?

0 голосов
/ 12 декабря 2018

Я создаю InputComponent и хочу импортировать этот компонент в другой компонент и выполнить отправку, но я не могу этого сделать.Как я могу получить значение от дочернего компонента в моем 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;

Ответы [ 3 ]

0 голосов
/ 12 декабря 2018

В React данные передаются в одну сторону , от родителя к потомкам.

Следовательно, вам нужно иметь действительные состояния ввода в FormComponent и передавать их как реквизиты в InputComponent, а также функцию, которая имеет дело с FormComponent. 

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

Хорошая статья, чтобы понять это: https://openclassrooms.com/en/courses/4286486-build-web-apps-with-reactjs/4286721-understand-one-way-data-bindings

0 голосов
/ 12 декабря 2018

Вы можете создать действие onChange для дочернего компонента, например, вот ваш FormComponent: создайте эту функцию для обработки изменений: 

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

Передача реквизитов дочернему компоненту: 

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

А в дочернем компоненте (InputComponent) вы можете получить доступ к этому реквизиту и передать ему данные: 

this.props.onChange(event.target.value)
0 голосов
/ 12 декабря 2018

переместите ваши функции onChange в родительский компонент и сохраните имя пользователя и пароль в FormComponent компонент

...