Question

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

Answer 1

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

Answer 2

假设您在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 3

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


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

React Js：访问另一个组件中的ref

3 个答案: