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

【问题标题】：How can I pass values from one component to another component?如何将值从一个组件传递到另一个组件？
【发布时间】：2020-12-30 22:13:52
【问题描述】：

我有 SearchBox.js 组件，它设置了两个值 onChange 我想将选择值和输入值 onClick onSumbit 传递给 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>

【问题讨论】：

标签： javascript reactjs components react-props

【解决方案1】：

你可以像这样传递两个值：

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

在Movie 组件内部。捕捉这些价值：

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>
  );
}

【讨论】：

【解决方案2】：

您可能需要查看 React 文档以了解 Render Props 技术。

术语“render prop”是指一种在使用值为函数的道具反应组件。 了解更多here

【讨论】：