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

Posted 2023-01-13

我有两个组成部分，Edit（子级）和Index（父级）。Edit组件中有三个输入框，我想要：

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

2. 比较通过引用获得的这些输入（特别是在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 /> 

)

我该如何实现？

答案

我有一个主意，不是将refs从子代传递到父代，而是在父代中创建ref并将它们传递给子代组件，然后将它们分配给每个输入元素，类似于以下代码：]

父组件：

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
    ~~~
  />
此外，请记住，您应该为每个输入元素使用分隔的ref，而不是全部使用一个。