В моем случае, как передать данные из дочернего компонента в родительский компонент? - PullRequest
Новая
       102

В моем случае, как передать данные из дочернего компонента в родительский компонент?

0 голосов
/ 16 июня 2020

Вот часть родительского компонента 

render() {

    return (
      <>
        <Container fluid>
          <Row>
            <Col lg="3">
              <Profile

                edit={() => this.toggleModal(1)}
                loading={this.state.loading}
                title="Your Profile"
                image={this.context.userData.profilepic}
                firstname={this.state.data.firstname}
                lastname={this.state.data.lastname}
                highschool={this.state.data.user_high_schools}
                desc={this.state.data.dob}


              />
            </Col>

вот дочерний компонент 

return (
    <>
      <Row>
        <Col lg='4'>
          <InputGroup className='mt-1'>
            { university.id > 0 ?
                <Input id={university.id} bsSize='sm' placeholder="University name" value={university.system_university.name} onChange={props.handleUniversityChange} /> :
                <Input id={university.id} name='universityid' type='select' bsSize='sm' placeholder="Apply date" value={university.universityid} onChange={props.handleUniversityChange} >

Итак, мой проблема в дочернем компоненте , там имя значения {university.system_university.name}, и оно содержит нужное мне значение. Но я действительно не знаю или сомневаюсь передать это значение из дочернего компонента в родительский компонент. Надеюсь, вы поняли мой вопрос,

Спасибо.

1 Ответ

0 голосов
/ 16 июня 2020

так что вы хотите сделать?

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

, например:

Parent компонент 

const handleUniversityChange = (data) => {
  /* do some staff with your data from within child component */
}

return (
  <Child onUniversityChange={handleUniversityChange} />
)

Дочерний компонент 


const handleUniversityChange = e => {
  props.onUniversityChange(e.target.value)
}

return (
  <input onChange={handleUniversityChange} />
)
...