如何将“选择”上的值发送到另一页

Question

我想从select.js到index.js获得价值--我不知道在index.js上得到它

Select.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;

Index.js

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

   </div>
  )
}

Answer 1

在您的Select组件中，您需要通过其属性再添加一个函数，以便将值发送给父组件。

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