时间戳

首页 > 解决方案 > 就我而言，如何将数据从子组件传递到父组件？

reactjs - 就我而言，如何将数据从子组件传递到父组件？

问题描述

这是父组件的部分

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}，它包含我想要的值。但是我真的不知道或怀疑将这个值从子组件传递给父组件。希望大家能理解我的问题

谢谢。

标签： reactjsreact-nativereact-reduxrxjsreact-router

解决方案

那你想做什么？

react 是唯一的事实来源，您应该将回调函数从父级传递给子级

例如：

父组件

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} />
)

推荐阅读