javascript - 将多个引用从子组件传递到父组件-Reactjs

Question

我有两个组件，编辑(子组件)和索引(父组件)。编辑组件中有三个输入框，我想:

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

2. 比较通过 refs 获取的这些输入(特别是在 HandleUpdate 函数中)

Edit.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} />

Index.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}
  }
}

并在子组件中将每个引用传递给相关的输入元素:

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

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