如何将 Select 的值从子组件传递到父组件？

Question

用户可以根据选择的内容选择另一个 select 出现的类别。我在另一个 .js 中创建了第二个组件。我已经可以查看数据，但如何将我的第二个组件的值传递给父组件？

我想将 select 的值从 size1,js 传递给 demo.js

Link: https://codesandbox.io/s/category-selection-oiu7d

demo.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Size1 from "./size1";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      selected: {age}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Category</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="S-XL">S-XL</MenuItem>
          <MenuItem value="Size2">Size2</MenuItem>
        </Select>
      </FormControl>
      {age === "S-XL" && (
        <>
          <Size1 />{" "}
        </>
      )}
    </Box>
  );
}

size1.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export const Size1 = ["XS", "S", "M", "L", "XL"];

export default function BasicSelect() {
  const [size1, setSize1] = React.useState("");

  const handleChange = (event) => {
    setSize1(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      chosen size: {size1}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size1}
          label="size1"
          onChange={handleChange}
        >
          <MenuItem value="XS">XS</MenuItem>
          <MenuItem value="S">S</MenuItem>
          <MenuItem value="M">M</MenuItem>
          <MenuItem value="L">L</MenuItem>
          <MenuItem value="XL">XL</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Answer 1

只需在子组件的父组件中添加一个侦听器并处理从子组件发出的更改

parent.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import Size1 from "./size1";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };


function handleSelectionUpdate(data){
//Whatever you want to do with the data passed
}
  return (
    <Box sx={{ minWidth: 120 }}>
      selected: {age}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Category</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="S-XL">S-XL</MenuItem>
          <MenuItem value="Size2">Size2</MenuItem>
        </Select>
      </FormControl>
      {age === "S-XL" && (
        <>
          <Size1 onSelectionUpdate={handleSelectionUpdate} />{" "} //Change here
        </>
      )}
    </Box>
  );
}

child.js

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export const Size1 = ["XS", "S", "M", "L", "XL"];

export default function BasicSelect(props) {
  const [size1, setSize1] = React.useState("");

  const handleChange = (event) => {
    setSize1(event.target.value);
    props.onSelectionUpdate(event.target.value)  //emit an event here 
  };

  return (
    <Box sx={{ minWidth: 120 }} {...props}>
      chosen size: {size1}
      <br /> <br />
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Choose Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size1}
          label="size1"
          onChange={handleChange}
        >
          <MenuItem value="XS">XS</MenuItem>
          <MenuItem value="S">S</MenuItem>
          <MenuItem value="M">M</MenuItem>
          <MenuItem value="L">L</MenuItem>
          <MenuItem value="XL">XL</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

Answer 2

我编辑了你的代码，请看https://codesandbox.io/s/category-selection-forked-rb8dl

只需删除 onSelectionUpdate 即可；)

如何将 Select 的值从子组件传递到父组件？

How do I pass the value of Select from Child to Parent Component?

javascript

drop-down-menu

reactjs

material-ui