Question

我想将HOC构造函数中的create的引用传递给包装的组件，但是我很难使它正常工作。我读了ReactJs documentation on this part，但仍然很难找到有效的示例。

class FancyInput extends React.Component {

  constructor(props) {
    super(props)
    this.state = { name: 'Alice' };
    this.inputField = React.createRef();
  }

  handleClick = () => {
    console.log("WrappedComponent handleClick");
    const text = this.inputField.current.value.toLowerCase();
    this.setState({ name: text });
    this.props.onClick();
  }

  render() {
    return (
      <div>
        <p>Welcome {this.state.name}</p>
        <input ref={this.inputField} type="text" value={this.state.name} />
        <button onClick={this.handleClick}>OK</button>
      </div>
    );
  }
}

我想要一个HOC，它将行为从toLowerCase更改为toUpperCase

function upperCase(WrappedComponent) {
  class UpperCaseInput extends React.Component {

    constructor(props) {
      super(props)

      this.hocInputField = React.createRef();
    }

    handleClick = () => {
      console.log("HOC handleClick");
      const text = this.hocInputField.current.value.toUpperCase();
      //pass text down as props
    }

    render() {

      return (<WrappedComponent onClick={this.handleClick} />)
    }

    // render() {
    //   return (<WrappedComponent ref={this.inputField} onClick={this.handleClick} />)
    // }
  }

  // return React.forwardRef((props, ref) => {
  //   return <UpperCaseInput {...props} inputField={ref} />
  // });
  return (<UpperCaseInput />);

}

如何将this.hocInputField附加到包装的组件输入标签的ref上并获取其值（并像在FancyInput中一样对其进行操作）？

我在注释中留下了我尝试编写的代码。

感谢您的帮助

在ReactJs中从更高阶传递ref

0 个答案: