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

Question

我有一个非常简单的递增和递减 TextField 值的问题。我在 React 中使用 Formik 和 Material UI。请查看此代码框 link

<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>

Answer 1

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

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

您可以查看工作示例here

Answer 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 以更清楚地查看它。

Answer 3

使用 setValues 更新您的 values 对象。每次用户单击 increment/decrement 按钮时，您都会调用 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 文本字段的 onClick 与上面相同，只是您将更新 dispatchValue 而不是 returnValue。你明白了。

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

How to Increment and Decrement in ReactJS using Formik

ecmascript-6

reactjs

material-ui

formik

react-hooks