更改React中僅選定的Select下拉串列的值

我正在嘗試通過單擊按鈕添加多個輸入欄位并選擇下拉欄位。單擊“添加列”按鈕后，我將向組件添加新行。

當我在一行中更改下拉值時，由于 useState，其余 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>
)
}

uj5u.com熱心網友回復：

您需要將“型別”狀態更改為陣列。它將包含所有選擇型別的狀態，而不僅僅是一種。你可以這樣做：

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

標籤：

上一篇：你用什么代替“。”在帕格？

下一篇：需要在父組件上計算每個子組件上的鉤子呼叫的結果