如何在没有保存按钮的情况下突变 material-ui 输入？

Question

我正在尝试在没有保存按钮的情况下进行变异。当用户 writes/edits 输入行上的内容时，它应该自动保存在 graphql 中。这段代码有效，但有些奇怪。当我输入“hello”时，它会保存四次 h, he, hel, hell，但是当我查询产品名称时它不会保存 hello。

如果有更好的方法请告诉我。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  // import { Button } from "@mui/material";
    import React, { useEffect, useRef, useState } from "react";
    // import TextField from "@material-ui/core/TextField";
    import EditIcon from "@material-ui/icons/Edit";
    // import CheckIcon from "@material-ui/icons/Check";
    import {
      FormControl,
      FormHelperText,
      Grid,
      Input,
      InputAdornment,
    } from "@material-ui/core";
    import { makeStyles } from "@material-ui/styles";
    import { gql, useMutation } from "@apollo/client";

    const CREATE_PRODUCT = gql`
      mutation AddProduct($name: String!) {
        addProduct( name: $name) {
          name
        }
      }
    `;

    const EditTextField = () => {
      const [inputText, setInputText] = useState<string>("");
      const [disabled, setDisabled] = useState<boolean>(true);

      const inputRef = useRef<HTMLInputElement>();

      const [AddProduct,{data, loading, error}] = useMutation(CREATE_PRODUCT, {
        variables:{
          name:inputText,
        }
      })

      return (
        <Grid container>
          <Grid item>
            <FormControl>
              <Input
                id="standard-adornment-weight"
                value={inputText}
                onChange={(e: any) => {setInputText(e.target.value);AddProduct()}}
                endAdornment={
                  <InputAdornment position="end">
                    <EditIcon />
                  </InputAdornment>
                }
              />
              <FormHelperText id="standard-weight-helper-text">
                Column Nmae
              </FormHelperText>
            </FormControl>
          </Grid>
        </Grid>
      );
    };

    export default EditTextField;

Answer 1

我建议将您的突变包裹在 useEffect 钩子中，然后在输入文本更改时调用 useEffect。

如下所示：

const [inputText, setInputText] = useState<string>("");

useEffect(() => {
    AddProduct({ variables: { name: inputText } })
}, [inputText]); /* useEffect triggered when inputText state changes. */

如何在没有保存按钮的情况下突变 material-ui 输入？

How can I mutation material-ui Input without save button?

mutation

typescript

reactjs

graphql

material-ui