reactjs - Skicka ref ner till barn i React + Typescript

Jag har en app där jag behöver hantera fokus på inmatningsfälten och för det ändamålet använder jag React ref.

Jag har två inmatningar som jag vill flytta till en separat komponent. Nu ser de ut som följande:

<input
  onChange={this.handleChangeOne}
  ref={refOne => (this.refOne = refOne as HTMLInputElement)}
  type="text"
/>
<input
  onChange={this.handleChangeTwo}
  ref={refTwo => (this.refTwo = refTwo as HTMLInputElement)}
  type="text"
/>

Jag har problem med att få dem att fungera i en separat komponent medan det innebär att skicka ner ref-propen. Jag har försökt något liknande detta:

<InputBlock

          handleChangeOne={() => this.handleChangeOne}
          handleChangeTwo={() => this.handleChangeTwo}
          refOne=(refOne => (this.refOne = refOne as HTMLInputElement)}
          refTwo={refTwo => (this.refTwo = refTwo as HTMLInputElement)}
        />

Och komponenterna själva

class InputBlock extends React.Component<IProps> {
  public render() {
    return (
      <React.Fragment>
        <input
          ref={refOne}
          onChange={handleChangeOne}
          type="text"
        />
        <input
          ref={refTwo}
          onChange={handleChangeTwo}
          type="text"
        />
      </React.Fragment>
    );
  }
}

export default InputBlock;

Som exempel vill jag att handleChangeOne ska fokusera på inmatning två, och handleChangeTwo ska fokusera på inmatning ett

Svar #1

Jag vet inte vad som gick fel för dig, men följande fungerar för mig:

import * as React from "react";
import * as ReactDOM from "react-dom";

class OuterComponent extends React.Component<{}, {}> {
  refOne: null | HTMLInputElement = null;
  refTwo: null | HTMLInputElement = null;
  render() {
    return <InputBlock
      handleChangeOne={this.handleChangeOne}
      handleChangeTwo={this.handleChangeTwo}
      refOne={refOne => (this.refOne = refOne)}
      refTwo={refTwo => (this.refTwo = refTwo)}
    />;
  }

  handleChangeOne = () => {
    console.log("handleChangeOne", this.refOne, this.refTwo);
  }
  handleChangeTwo = () => {
    console.log("handleChangeTwo", this.refOne, this.refTwo);
  }
}

interface IProps {
  refOne: React.Ref<HTMLInputElement>;
  refTwo: React.Ref<HTMLInputElement>;
  handleChangeOne: React.ChangeEventHandler<HTMLInputElement>;
  handleChangeTwo: React.ChangeEventHandler<HTMLInputElement>;
}
class InputBlock extends React.Component<IProps> {
  public render() {
    return (
      <React.Fragment>
        <input
          ref={this.props.refOne}
          onChange={this.props.handleChangeOne}
          type="text"
        />
        <input
          ref={this.props.refTwo}
          onChange={this.props.handleChangeTwo}
          type="text"
        />
      </React.Fragment>
    );
  }
}

ReactDOM.render(<OuterComponent/>, document.getElementById("root"));

Svar #2

För funktionell komponent:

import React,{useRef} from 'react';

const ParentComp = () => {
    const parentDivRef = useRef<HTMLButtonElement>(null);
    return(
        <ChildButtonComp ref={parentDivRef}>Click Me</ChildButtonComp>
    )
}

import React, { Ref, forwardRef,ReactNode } from "react";

const ChildButtonComp = forwardRef(
  (props: { children: ReactNode }, ref: Ref<HTMLButtonElement>) => {
    return <button ref={ref}>{props.children}</button>;
  }
);

Relaterade artiklar