如何使用 Formik 在 ReactJS 中递增和递减答案

【问题标题】：How to Increment and Decrement in ReactJS using Formik如何使用 Formik 在 ReactJS 中递增和递减
【发布时间】：2020-12-31 09:13:23
【问题描述】：

在我的 TextField 中增加和减少值时，我遇到了一个非常简单的问题。我在 React 中使用 Formik 和 Material UI。请查看此代码框链接

CLICK HERE

<TableCell>
   {" "}
   <TextField
   variant="outlined"
   fullWidth
   type="number"
   name={`data.${idx}.returnValue`}
   value={
   values.data[idx] &&
   values.data[idx].returnValue
   }
   onChange={handleChange}
   onBlur={handleBlur}
   inputProps={{
   min: 0,
   style: {
   textAlign: "center"
   }
   }}
   InputProps={{
   startAdornment: (
   <InputAdornment position="start">
      <IconButton>
         <RemoveCircleOutlineIcon />
      </IconButton>
   </InputAdornment>
   ),
   endAdornment: (
   <InputAdornment position="end">
      <IconButton>
         <AddCircleOutlineIcon />
      </IconButton>
   </InputAdornment>
   )
   }}
   />
</TableCell>

【问题讨论】：

标签： reactjs ecmascript-6 material-ui react-hooks formik

【解决方案1】：

使用setValues 更新您的values 对象。每次用户单击递增/递减按钮时，您调用setValues 来更新当前记录。

这就是RemoveCircleOutlineIcon onClick 函数在returnValue 的文本字段中的样子。

...
onClick={() => {
  // decrement current record's returnValue
  const newData = values.data.map((currData) => {
    if (currData.name !== record.name) return currData;
    return { ...currData, returnValue: currData.returnValue - 1 };
  });

  setValues({ ...values, data: newData });
}}

...这个为AddCircleOutlineIcon，基本相同，我们只是增加当前记录的returnValue。

onClick={() => {
  // increment current record's returnValue
  const newData = values.data.map((currData) => {
    if (currData.name !== record.name) return currData;
    return { ...currData, returnValue: currData.returnValue + 1 };
  });

  setValues({ ...values, data: newData });
}}

当前记录的dispatchValue 文本字段的onClicks 与上面相同，只是您将更新dispatchValue 而不是returnValue。你明白了。

【讨论】：

【解决方案2】：

您必须使用States 来呈现更改，我使用useState 修改了您的逻辑。并添加一个事件以在每次更改时更改值按一个按钮（+ 或 -）。

const [products, setProduct] = useState(data);

  const initialValues = {
    customer_id: null,
    reason: "",
    products
  };

// an example of the events
 <InputAdornment position="start">
   <IconButton
     onClick={() => {
              decrement(
                        idx,
                        "returnValue" // the key value
                        );
              }}
     >
       <RemoveCircleOutlineIcon />
       </IconButton>
  </InputAdornment>

检查您的代码here 以更清楚地看到它。

【讨论】：

【解决方案3】：

您可以使用 arrayHelpers 中的 replace 函数。

<IconButton
   onPress={() => {
     replace(idx, { ...record, returnValue: record.returnValue + 1})
   }}
>
</IconButton>

您可以查看工作示例here

【讨论】：