仅更改 React 中选定的 Select 下拉列表的值

Question

我正在尝试通过单击按钮添加多个输入字段和 Select 下拉字段。单击 添加列 按钮后，我向组件添加了一个新行。

当我更改一行中的下拉值时，由于 useState，其余 Select 选项的所有值也会发生变化。

我只想更改 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>
)
}

Answer 1

您需要更改为数组的“类型”状态。它将包含所有 select 类型的状态，而不仅仅是一种。你可以这样做：

  const ModalComponent = ({ modal }) => {
  const [close, setClose] = useState(true);
  const [count, setCount] = useState(0);
  const [types, setTypes] = useState([]);

  const handleTypeChange = (e, index) => {
    const newTypes = [...types];
    newTypes[index] = e.target.value;
    setTypes(newTypes);
  };

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

仅更改 React 中选定的 Select 下拉列表的值

Change value of only selected Select dropdown in React

drop-down-menu

reactjs

react-hooks

react-functional-component