如何在选择中将值发送到另一页

Question

我想从select.js到index.js

获得

const SelectSmall = () => {
const [ProJect, setProJect] = React.useState("");


return (
  <FormControl sx={{ m: 1, minWidth: 150 }} size="small">
    <h1>{ProJect}</h1>
    <InputLabel id="Projects">Project</InputLabel>
    <Select
      labelId="Projects"
      id="Projects"
      value={ProJect}
      label="Project" 
      onChange={e=>setProJect(e.target.value)}
      
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={'ma'}>MA-Network</MenuItem>
      <MenuItem value={'ns'}>Network-Security</MenuItem>
      <MenuItem value={'fz'}>Freezone</MenuItem>
      <MenuItem value={'ma-2'}>MA-Network2</MenuItem>
    </Select>
  </FormControl>
);
}

  export default SelectSmall;

值

import React from 'react'
import SelectSmall from "./select"
export const App> = () => {
return (
   <div>
     <h1><SelectSmall.Project><h1>

   </div>
  )
}

Answer 1

在您的选择组件中，您需要通过其属性添加更多功能，以将值发送到父组件

const SelectSmall = props => {

。
。
。

<Select
      labelId="Projects"
      id="Projects"
      value={ProJect}
      label="Project" 
      onChange={e=> handleValueChange(e)}
    >

。
。
。

const handleValueChange = e => {
  setProJect(e.target.value)
  props.getValue(e.target.value)
} 

并在父组件中添加一个新功能以使用此新值

import React from 'react'
import SelectSmall from "./select"
export const App> = () => {
 
const printSelectValue = val => {
  console.log(val)
}

return (
   <div>
     <h1><SelectSmall getValue={printSelectValue}><h1>

   </div>
  )
}