Передача нескольких ссылок из дочернего компонента в родительский компонент - Reactjs - PullRequest
Новая
       4

Передача нескольких ссылок из дочернего компонента в родительский компонент - Reactjs

0 голосов
/ 06 мая 2020

У меня есть два компонента: Edit (дочерний) и Index (родительский). В компоненте Edit есть три поля ввода, и я хотел бы:

  1. Передать эти три ссылки в компонент Index

  2. Сравните эти входные данные, полученные с помощью ссылок (в частности, в функции HandleUpdate)

Изменить. js: 

<form onSubmit={props.handleUpdate}>
        <input 
            className=""
            name="name" 
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue= {props.name} /> 
        <input 
            className=""
            type="number" 
            name="day"
            min="1" 
            max="31"
            ref={props.setRef}
            onChange={props.handleChange}
            defaultValue= {props.day}  />
        <input 
            className=""
            name="dob"
            type="month"    
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue={props.dob} />

Индекс. js: 

class BirthdaylistKeeper extends React.Component{
    constructor(props){
        super(props);
   //state
}
...
handleUpdate(event){
        event.preventDefault(); 
            //if((name.value === "") && (dob.value === "") && (day.value === "")){
            //  console.log("empty");
            //}

            const item = this.state.currentItem;
            let index = this.state.items.indexOf(item);
            const newItemList = [...this.state.items];
            newItemList.splice(index, 1, this.state.dataEdited);

            this.setState({ 
                items: [...newItemList],
                toggle: false 
            });

    }   
//...
render(){
        return(
            ...
                <Entry
                    name={this.state.name}
                    day={this.state.day}
                    dob={this.state.dob}
                    onChange={this.handleChange}
                    onSubmit={this.handleSubmit} 
                    setRef={this.setRef} /> 

)
}

Как этого добиться?

1 Ответ

1 голос
/ 06 мая 2020

У меня есть идея, вместо того, чтобы передавать refs от дочернего к родительскому, сделать refs в родительском компоненте и передать их дочернему компоненту, а затем назначить их каждому элементу ввода, что-то вроде следующих кодов :

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

import React, { Component, createRef } from 'react';

class BirthdaylistKeeper extends Component{
  constructor(props) {
    super(props);

    this.nameRef = createRef();
    this.dayRef = createRef();
    this.dobRef = createRef();

   //state
  }

  ~~~

  render() {
    return(

      ~~~

      <Entry
        nameRef={this.nameRef}
        dayRef={this.dayRef}
        dobRef={this.dobRef}
  }
}

И в дочернем компоненте передайте каждую ссылку на связанный элемент ввода: 

<form onSubmit={props.handleUpdate}>
  <input
    ~~~
    name="name"
    ~~~
    ref={props.nameRef}
    ~~~
  /> 
  <input
    ~~~
    name="day"
    ~~~
    ref={props.dayRef}
    ~~~
  />
  <input
    ~~~
    name="dob"
    ~~~
    ref={props.dobRef}
    ~~~
  />

Также помните, что вы должны использовать разделенные refs для каждого входного элемента, не используя один для всех.

...