reactjs - React Js：在另一个组件中访问 ref

Question

我在一个组件中有一个带有 ref 的文本框（modalBox.js）我如何在按钮单击时访问另一个组件上的文本框的值，例如（index.js）

Answer 1

假设您有一个input字段Component1-

const Component1 = props => {
  let textInput = useRef(null);

  const handleOnChange = event => {
    props.onChange(textInput)
  }

  return ( 
    <input onChange={handleOnChane} ref={textInput} /> 
  )
}

现在从另一个组件，您想在其中捕获参考 -

<Component1 onChange = {ref => console.log(ref) } />

在这里，我只是在控制台中打印 ref 对象。但是你可以做任何你想做的事情。

Answer 2

在反应中检查 refForwarding。 https://reactjs.org/docs/forwarding-refs.html

Answer 3

const MyComponent = React.forwardRef((props, ref) => (
  <button ref={ref}>
    Click me
  </button>
));


const ref = React.createRef();
<MyComponent ref={ref}>Click me!</MyComponent>;