将多个 Refs 从子组件传递给父组件-Reactjs

Question

我有两个组件，编辑（子）和索引（父）。 编辑组件中有三个输入框，我想：

1. 将这三个 ref 传递给Index组件

2. 比较通过 refs 获得的这些输入（特别是在 HandleUpdate function 中）

编辑.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} /> 

)
}

我怎样才能做到这一点？

Answer 1

我有一个想法，与其将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}
  }
}

并在子组件中将每个 ref 传递给相关的输入元素：

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

另外，请记住，您应该为每个输入元素使用单独的引用，而不是对所有输入元素都使用一个。