[英]Change value of only selected Select dropdown in React
我正在尝试通过单击按钮添加多个输入字段和 Select 下拉字段。 单击“添加列”按钮后,我将向组件添加新行。
当我在一行中更改下拉值时,由于 useState,Select 选项的 Z65E8800B5E9FFZ 选项的 rest 的所有值也在发生变化。
我只想要 Select 下拉列表的值来更改我手动更改的值。
const ModalComponent = ({ modal }) => {
const [close, setClose] = useState(true)
const [count, setCount] = useState(0)
const [type, setType] = useState('')
const handleTypeChange = (e) => {
setType(e.target.value)
}
const removeColumnHandler = () => {
setCount(count - 1)
}
const AddElement = () =>
<p>
<TextField id="outlined-basic" label="Column Name" className="add-column" variant="outlined" />
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={type}
label="Type"
onChange={handleTypeChange}
>
<MenuItem value="VARCHAR">String</MenuItem>
<MenuItem value="INTEGER">Numeric</MenuItem>
<MenuItem value="TIMESTAMP">Date</MenuItem>
</Select>
<DeleteOutlinedIcon
className="delete-column"
onClick={removeColumnHandler} />
</p>
const addColumnHandler = () => {
setCount(count + 1)
}
const handleClose = () => {
if (modal) {
setClose((prevState) => !prevState)
}
}
return (
<div>
<Modal
open={close}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<form>
<FormGroup>
<FormControlLabel control={<Checkbox />} label="Date" />
</FormGroup>
<div className="vr"></div>
<div className="column-div-wrapper">
{[...Array(count)].map((_, i) => <AddElement key={i} />)}
</div>
<Button
className='add-column-button'
onClick={addColumnHandler}
>
Add Column
</Button>
<Button className="submit-btn">Submit</Button>
</form>
</Box>
</Modal>
</div>
)
}
您需要将 state 更改为“类型”为数组。 它将包含所有 select 类型的 state,而不仅仅是一个。 你可以这样做:
const ModalComponent = ({ modal }) => {
const [close, setClose] = useState(true);
const [count, setCount] = useState(0);
const [types, setTypes] = useState([]);
const handleTypeChange = (e, index) => {
setTypes([...types, e.target.value]);
};
const removeColumnHandler = () => {
setCount(count - 1);
};
const AddElement = ({ index }) => (
<p>
<TextField
id="outlined-basic"
label="Column Name"
className="add-column"
variant="outlined"
/>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={type[index]}
label="Type"
onChange={(e) => handleTypeChange(e, index)}
>
<MenuItem value="VARCHAR">String</MenuItem>
<MenuItem value="INTEGER">Numeric</MenuItem>
<MenuItem value="TIMESTAMP">Date</MenuItem>
</Select>
<DeleteOutlinedIcon
className="delete-column"
onClick={removeColumnHandler}
/>
</p>
);
const addColumnHandler = () => {
setCount(count + 1);
};
const handleClose = () => {
if (modal) {
setClose((prevState) => !prevState);
}
};
return (
<div>
<Modal
open={close}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<form>
<FormGroup>
<FormControlLabel control={<Checkbox />} label="Date" />
</FormGroup>
<div className="vr"></div>
<div className="column-div-wrapper">
{[...Array(count)].map((_, i) => (
<AddElement key={i} index={i} />
))}
</div>
<Button className="add-column-button" onClick={addColumnHandler}>
Add Column
</Button>
<Button className="submit-btn">Submit</Button>
</form>
</Box>
</Modal>
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.