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

看看useRef钩子：https://reactjs.org/docs/hooks-reference.html#useref

Answer 2

如果要将组件转换为功能组件并使用钩子，可以这样做：

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 3

import React, { useRef } from 'react';

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

如何使用React钩子构建不受控制的组件？

3 个答案: