При передаче данных от родителя к потомку с помощью реквизита мой дочерний компонент отображается в родительском - PullRequest
Новая
       52

При передаче данных от родителя к потомку с помощью реквизита мой дочерний компонент отображается в родительском

0 голосов
/ 18 октября 2019

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

Родительский компонент 

render() {
    this.models = this.props.vehicleData.models !== undefined
        ? this
            .props
            .vehicleData
            .models
            .map((item) => (
                <option value={item.Model_ID} key={item.Model_ID}>{item.Model_Name}</option>
            ))
        : [];


    return (

        <Col>
        <PolicyDetail vin={this.state.vin}/>
            <PolicyDetail email={this.state.email}/>

            <Card small>
                <CardHeader className="border-bottom">
                    <h6 className="m-0">Policy Details</h6>
                </CardHeader>
                <ListGroup flush>
                    <ListGroupItem className="p-3">
                        <Row>
                            <Col>
                                <Form onSubmit={this.onSubmit}>
                                    <Row form>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Customer Name</label>
                                            <FormInput id="cName" placeholder="Enter your name" name="cName" />
                                        </Col>

                                        <Col md="6">
                                            <label htmlFor="cAge">Customer Age</label>
                                            <FormSelect id="feInputState" onChange={this.onChange} name="cAge">
                                                <option>Choose...</option>
                                                {this.cAge}
                                            </FormSelect>
                                        </Col>
                                    </Row>

                                    <Row form>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Email</label>
                                            <FormInput
                                                name="email"
                                                type="email"
                                                placeholder="Email"
                                                onChange={this.onChange}/>
                                        </Col>
                                        <Col md="6" className="form-group">
                                            <label htmlFor="feEmailAddress">Phone</label>
                                            <FormInput
                                                name="phone"
                                                type="number"
                                                placeholder="Phone"
                                                onChange={this.onChange}/>
                                        </Col>
                                    </Row>

                                    <Row form>
                                        <Col md="4">
                                            <label htmlFor="vin">VIN</label>
                                            <FormInput
                                                id="vin"
                                                name="vin"
                                                placeholder="Enter your Vehicle Indentification Number"
                                                onChange={this.onChange}
                                                value={this.state.vin}/>
                                        </Col>

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

class PolicyDetail extends Component {
  constructor(props){ 
    super(props);
      this.state = {
        vin : '' ,


      };
     function onReception() {
       let Vinsurance=this.props.vin
       console.log(Vinsurance)

     }
    }
    render(){

  return(  
    <div>
      <h1>VeichleIN:{this.props.vin}</h1>
    function(){

      console.log(12,this.props.vin)

    }
    function(){
      console.log(13,this.props.email)
    }
     </div>
  );
  }
}
  export default PolicyDetail
...