Javascript 如何将值从一个组件传递到另一个组件？

我有一个SearchBox.js组件，它在更改时设置两个值。我想在单击Movie.js组件时将选择值和输入值传递给Movie.js组件，我只能传递一个值，但不能传递第二个值（yearValue），有没有办法将两个值传递给Movie.js组件

function SearchBox(props) {
  const [searchValue, setSearchValue] = useState("");
  const [yearValue, setYearValue] = useState("");
  const getDropList = () => {
    const year = new Date().getFullYear();
    return Array.from(new Array(121), (v, i) => (
      <option key={i} value={year - i}>
        {year - i}
      </option>
    ));
  };
  return (
    <div>
      <Container>
        <Row>
          <Col>
            <InputGroup className="mb-3">
              <select value={yearValue} onChange={e => setYearValue(e.target.value)}>
                {getDropList()}
              </select>
              <FormControl
                value={searchValue}
                type="text"
                name="searchValue"
                onChange={e => setSearchValue(e.target.value)}
                placeholder="Search by title"
                aria-describedby="basic-addon2"
              />
              <InputGroup.Append>
                <Button
                  onClick={() => props.onSubmit(searchValue)}
                  variant="dark"
                >
                  Search
                </Button>
              </InputGroup.Append>
            </InputGroup>
          </Col>
        </Row>
      </Container>
    </div>
  );
}
export default SearchBox;


function Movie() {
const [data, setData] = useState(null);
 const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
 const [q, setQuery] = useState("");
const [activateModal, setActivateModal] = useState(false);
 const [detail, setShowDetail] = useState(false);
const [detailRequest, setDetailRequest] = useState(false);
 const [year,setYear] = useState("")

 return (
   <div>
      <Row>
        <Col>
          <SearchBox onSubmit={setQuery} />
        </Col>  
      </Row>

功能搜索框（道具）{
常量[searchValue，setSearchValue]=useState（“”）；
const[yearValue，setYearValue]=useState（“”）；
常量getDropList=（）=>{
const year=新日期（）.getFullYear（）；
返回数组.from（新数组（121），（v，i）=>(
{year-i}
));
};
返回(
setYearValue（e.target.value）}>
{getDropList（）}
setSearchValue（e.target.value）}
占位符=“按标题搜索”
aria descripeby=“basic-addon2”
/>
props.onSubmit（searchValue）}
variant=“深色”
>
搜寻
);
}
导出默认搜索框；
功能电影（）{
const[data，setData]=useState（null）；
const[error，setError]=useState（null）；
const[loading，setLoading]=useState（false）；
const[q，setQuery]=useState（“”）；
const[activateModal，setActivateModal]=useState（false）；
const[detail，setShowDetail]=使用状态（false）；
const[detailRequest，setDetailRequest]=useState（false）；
const[year，setYear]=useState（“”）
返回(

您可以这样传递这两个值：

<Button
                  onClick={() => props.onSubmit(searchValue,yearValue)}
                  variant="dark"
                >
                  Search
                </Button>

---

您可能需要查看React文档以了解

渲染道具

技术

术语“渲染道具”指的是一种在用户之间共享代码的技术 使用值为函数的道具对组件进行反应。 了解更多信息

function Movie() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [q, setQuery] = useState("");
  const [activateModal, setActivateModal] = useState(false);
  const [detail, setShowDetail] = useState(false);
  const [detailRequest, setDetailRequest] = useState(false);
  const [year, setYear] = useState("");

  const handleSubmit = (selectValue,yearValue) => {
    //do whatever you want to do
  }
  return (
    <div>
      <Row>
        <Col>
          <SearchBox onSubmit={handleSubmit} />
        </Col>
      </Row>
    </div>
  );
}