如何从 React 对话框中的 material-ui TextFileds 获取值？

赫尔曼·施普里豪

所以我有一个以下对话框：

<Dialog>
  <DialogContent sx={{ display: "flex", flexDirection: "column" }}>
    <TextField
      id="item-name"
      label="Item Name"
    />
    <TextField
      id="item-description"
      label="Item Description"
      multiline
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={onAddDialogClose}>Cancel</Button>
    <Button onClick={onAddNewItem}>Add Item</Button>
  </DialogActions>
</Dialog>

我想在“添加项目”按钮单击时使用这些字段中的数据进行 REST API 调用。如何从<TextField>s 中获取这些值？

阿里米尔扎伊

您应该controlled component通过向它们添加状态来制作您的 TextField：

  const [itemName, setItemName] = useState('')
  const [itemDest, setItemDest] = useState('')

  const onAddNewItem = () => {
    api.call(itemName, itemDest) // or whatever you want
    console.log(itemName)
    console.log(itemDest)
    setItemName('')
    setItemDest('')
  }

  return (
    <Dialog>
      <DialogContent sx={{ display: 'flex', flexDirection: 'column' }}>
        <TextField
          id="item-name"
          label="Item Name"
          value={itemName}
          onChange={e => {
            setItemName(e.target.value)
          }}
        />
        <TextField
          id="item-description"
          label="Item Description"
          multiline
          value={itemDest}
          onChange={e => {
            setItemDest(e.target.value)
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onAddDialogClose}>Cancel</Button>
        <Button onClick={onAddNewItem}>Add Item</Button>
      </DialogActions>
    </Dialog>
  )

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。