如何将 Select 上的值发送到另一个页面

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

如何将 Select 上的值发送到另一个页面

How to sent value on Select to another page

rxjs

reactjs

react-hooks