在 React + Typescript 中将 ref 传递给 child

Question

我有一个应用程序，我需要在其中管理对输入的关注，为此我使用 React ref。

我有两个输入要移到单独的组件中。现在它们看起来像下面这样：

<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"
/>

我无法让它们在单独的组件中工作，同时涉及传递 ref prop。我试过这样的事情：

<InputBlock

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

和组件本身

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;

例如，我想handleChangeOne关注输入二，并handleChangeTwo关注输入一

Answer 1

我不知道你出了什么问题，但以下对我有用：

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"));