reactjs - Material-ui Select MenuItem不显示

Question

我是 Material-ui 的新手，一直在为选择菜单项而苦苦挣扎。当我在 Select 中选择其中一个 MenuItems 时，我在浏览器中看不到任何内容。例如，当我选择“单元 A”时，它在我选择后不会显示在浏览器中。当我控制台也记录它时，它仍然是一个空字符串。非常确定它没有被选中，我想知道我错过了什么。

const myApp = () => {
    const [inputs, setInputs] = useState({
         salesUnit : "",
         serialNumber : "",
         partNumber : "",
         unitLocation : ""
})
    
    const addUnit = () => {
        http post request to backend
}

    const onChange = e => {
      setInputs({...inputs, [e.target.name] : e.target.value})
}

return (
        <Fragment>
            <div className="salesinventory-container">
            <h1 className="salesinventory-h1">Sales inventory</h1>
            <FormControl className={classes.formControl} onSubmit={addUnit} noderef={noderef}>
                <InputLabel id="demo-simple-select-label">Select Unit</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={salesUnit}
                    onChange={e => onChange(e)}
                    ref={noderef}
                    >
                    <MenuItem value={`Unit A`}>Unit A</MenuItem>
                    <MenuItem value={`Unit B`}>Unit B</MenuItem>
                    <MenuItem value={`Unit C`}>Unit C</MenuItem>
                    <MenuItem value={`Unit D`}>Unit D</MenuItem>
                    <MenuItem value={`Unit E`}>Unit E</MenuItem>
                    <MenuItem value={`Unit F`}>Unit F</MenuItem>
                </Select>
                <br></br>
            <div>
                <TextField id="standard-basic" label="Enter Serial Number" onChange={e => onChange(e)} value={serialNumber} name="serialNumber"/>
            </div>
                <br></br>
            <div>
                <TextField id="standard-basic2" label="Enter Part Number" onChange={e => onChange(e)} value={partNumber} name="partNumber"/>
            </div>
                <br></br>
            <div>
                <TextField id="standard-basic3" label="Enter BACS location" onChange={e => onChange(e)} value={unitLocation} name="unitLocation"/>
            </div>
                <br></br>
            <button>Add</button>
            </FormControl>
     </Fragment>
)
}

Answer 1

您可以使用 onSelect 事件，但我看不到 salesUnit 状态在哪里？？应该是

inputs.salesUnit

对吧？就像@BYates 说的，你需要 name 属性!