Question

我是新来的反应者，我想调用外部函数的状态，例如：

 export default function Child() {          
  const [succeeded, setSucceeded] = useState(false);
}

    export default function Parent() {     
          if(Child.succeeded){
             // do the following
          }
    }

我知道props仅用于const对象，并且我不想将两个函数合并在一个signle中以保持事物的有条理，我想 检查以获取孩子的状态以执行下一步，或回调具有新状态的父功能以通知它。有什么办法吗？非常感谢您的宝贵时间。

Answer 1

另一种方法是您可以使用 useRef ，在某些情况下这非常方便。

import React, {useState} from "react";


export default function Child({nameRef}) {
  const [name, setName] = useState('');
  React.useEffect(() => {
    nameRef.current = name;    
  }, [name]);
  return (
   <>
      <input nameRef={nameRef} type="text" onChange={event => setName(event.target.value)} />
   </>
  );
}

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import Child from './Child';

function App() {
  let [name, setName] = useState("Nate");

  let nameRef = useRef();

  const submitButton = () => {
    console.log(nameRef.current);
  };

  return (
    <div className="App">
      <p>{name}</p>

      <div>
        <Child nameRef={nameRef} />
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

检查另一个功能组件的状态

1 个答案: