您需要在父级中维护查询并将值和 onChange 传递给子级：

function Searchbar({ value, onChange }) {
  return (
    <TextField
      placeholder="Search"
      label="Search bar"
      fullWidth
      value={value}
      onChange={onChange}
    />
  );
}

function Searchform() {
  function handleSubmit() {
    console.log(query);
  }
  const [query, setQuery] = useState('');
  //create onChange function that will never
  //  change during component life cycle
  const onChange = useCallback(
    e => setQuery(e.target.value),
    []
  );

  return (
    <form onSubmit={handleSubmit}>
      <div className="searchbar">
        {/* pass value and onChange */}
        <Searchbar value={query} onChange={onChange} />
        but not sure what.
      </div>
      <Button
        variant="contained"
        color="primary"
        type="submit"
      >
        Submit your search
      </Button>
    </form>
  );
}

希望这可以帮助，

 function Searchform() {

  function handleSubmit() {
    console.log(query)
  }

  const [query, setQuery] = useState("");

  return(
    <form onSubmit={handleSubmit}>
        <div className="searchbar">
          <Searchbar setQuery={setQuery} />
        </div>
        <Button variant="contained" color="primary" type="submit">
        Submit your search
      </Button>
    </form>
  )
}



function Searchbar({setQuery}) {

 // const [query, setQuery] = useState("");

  return(
    <TextField
      defaultValue=""
      placeholder="Search"
      label="Search bar"
      fullWidth
      onChange={(event)=>setQuery(event.target.value)}
    />
  )
}

状态应该被提升到处理状态的最顶层容器，然后通过props（或上下文的提供者）向下传递。

要更新状态，您必须将回调函数（通过 props）从父组件传递给子组件，以允许子组件更新父组件的状态。然后，在重新渲染期间，更改将传播到所有子项。

这是一个通用的 React 概念，无论是使用钩子还是类，请参阅 React 文档

一个基本的例子：

const Parent = () => {

  const [query, setQuery] = useState(null);

  return <Child onQuery={setQuery} />;

}

const Child = ({ onQuery }) => (
  <TextField onChange={event => onQuery(event.target.value)} />
);