如何在没有保存按钮的情况下更改 material-ui Input？答案

【问题标题】：How can I mutation material-ui Input without save button?如何在没有保存按钮的情况下更改 material-ui Input？
【发布时间】：2022-02-16 00:58:48
【问题描述】：

我正在尝试在没有保存按钮的情况下进行变异。当用户在输入行上写/编辑某些东西时，它应该自动保存在 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;

【问题讨论】：

React 状态更新不是立即的，你的组件只会在下一次渲染时看到新状态，所以在这个表达式setInputText(e.target.value);AddProduct() 中，AddProduct() 函数将在之前的状态上运行。您可能应该将它放在 useEffect 中，并以 inputText 作为依赖项。

标签： reactjs typescript graphql material-ui mutation

【解决方案1】：

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

如下所示：

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

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

【讨论】：