Как построить неуправляемый компонент с реагирующими крючками?

Question

Как мне перевести этот неконтролируемый компонент в реагировать на хуки (и избежать мульти-рендеринга поля ввода):

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
  }

  render() {
    const {onInputChanged} = this.props;
    return (
      <form>
        <input type="text" ref={this.input} onChange={onInputChanged}/>
      </form>
    );
  }
}

Answer 1

Если вы хотите преобразовать свой компонент в функциональный компонент и использовать хуки, вы можете сделать это следующим образом:

import React, { useRef,useEffect } from 'react';

useEffect(() => {

},['the props you write here will trigger the re-render when they change'])
const MyForm = (props) => {
  const input = useRef(null);
  return (
    <form>
      <input type="text" ref={input} onChange={props.onInputChanged} />
    </form>
  );
}

export default MyForm;

Answer 2

import React, { useRef } from 'react';

export const MyForm = (props) => {
  const input = useRef(null);
  return (
    <form>
      <input type="text" ref={input} onChange={props.onInputChanged} />
    </form>
  );
}

Answer 3

Взгляните на useRef крючок: https://reactjs.org/docs/hooks-reference.html#useref