reactjs - 当状态改变时动态改变 Formik 中的值
问题描述
每次状态(称为 selectedProduct,其输入字段不包含在 Formik 标签中)更改时,我都需要更改表单字段中的值。我试过了:
- 将我想要的值放在 initialValues 中(显然不起作用,因为在第一次渲染时我还没有选择我的 selectedProduct)
- 将我想要的值放在 formik 中每个字段的“值”道具中。它几乎可以工作:Datepicker 获得正确的值,选择框输入没有获得任何值(idk 为什么),文本字段采用正确的值,但这被标签覆盖。那是因为没有一个字段得到验证。
这就是我所做的,应用了上述两点
import React, { useState } from 'react';
import * as Yup from 'yup';
import {
Formik, Form, ErrorMessage, Field,
} from 'formik';
import {
Button, TextField,
MenuItem,
} from '@material-ui/core';
import DateFnsUtils from '@date-io/date-fns';
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '@material-ui/pickers';
const validationSchema = Yup.object().shape({
startValidityDate: Yup.date().required(),
discount: Yup.string().required(),
days: Yup.string().required(),
});
const MyComponent = ({filteredProduct, daysList}) => {
const [selectedProduct, setSelectedProduct] = useState('');
const onChangeProduct = (product) => {
setSelectedProduct(product.target.value);
};
const handleRunButton = (newExecution) => {
console.log(newExecution);
};
return (
<div>
<div className={classes.productComboWrapper}>
<div id="selectBoxNotIncludedInFormik">
<TextField
margin="normal"
style={{}}
variant="outlined"
name="productId"
id="productId"
fullWidth
select
label="Select product"
value={selectedProduct?.id}
onChange={(product) => onChangeProduct(product)}
>
<MenuItem key="" value="">
{StringsConst.noneSelected}
</MenuItem>
{filteredProduct?.map((el) => (
<MenuItem key={el} value={el}>
{el.isin}
</MenuItem>
))}
</TextField>
</div>
</div>
<Formik
initialValues={{
startValidityDate: selectedProduct?.startValidityDate,
days: selectedProduct?.coupon?.days,
discount: selectedProduct?.discount,
}}
validationSchema={validationSchema}
onSubmit={(values) => {
const newExecution = {
startValidityDate: values.startValidityDate,
days: values.days,
discount: values.discount,
};
handleRunButton(newExecution);
}}
>
{({
errors, dirty, setFieldValue, values,
}) => (
<Form>
<div className={classes.datePicker}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
label="Start Validity Date"
inputVariant="outlined"
variant="inline"
autoOk
fullWidth
disabled
format="dd/MM/yyyy"
value={selectedProduct?.startValidityDate}
onChange={(dt) => setFieldValue('startValidityDate', dt)}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</div>
<div className={classes.fieldWrapper}>
<Field
className={classes.field}
name="discount"
as={TextField}
variant="outlined"
margin="normal"
fullWidth
id="discount"
autoComplete="discount"
placeholder="Discount"
disabled
value={selectedProduct?.discount}
/>
</div>
<div className={classes.textFieldWrapper}>
<TextField
margin="normal"
style={{}}
variant="outlined"
name="days"
id="days"
fullWidth
select
label="Days"
disabled
value={selectedProduct?.coupon?.days}
onChange={(val) => setFieldValue('days', val.target.value)}
>
<MenuItem key="" value="">
{StringsConst.noneSelected}
</MenuItem>
{daysList.map((el) => (
<MenuItem key={el} value={el}>
{el}
</MenuItem>
))}
</TextField>
</div>
<div className={classes.buttonContainer}>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
{StringsConst.Run}
</Button>
</div>
</Form>
)}
</Formik>
</div>
)
}
因此,表单中的三个输入字段被禁用,但是当我在表单外的第一个选择框中选择一个值时,我需要填写它们。你能建议我另一种方法吗?
解决方案
您可以将输入或按钮连接到表单外的表单。
像这样的代码:
<form id="myForm">
<button> click me </button>
</form>
<input type="text" form="myForm"/>
参考:https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform
推荐阅读
- ubuntu - Xubuntu 给我看两个音频接口,我只有一个
- c++ - 如何修复由于在另一个类中使用类的对象而导致的动态分配内存的双重删除?
- google-kubernetes-engine - How to setup Google Cloud Composer to be able to launch pods on a GKE Autopilot cluster
- javascript - 无法在“文档”上执行“querySelector”:“button[data-id="purple-button" disabled]”不是有效的选择器
- c# - C# 自定义文件扩展名过滤器
- c# - ObjectResult 和 HttpResponse 正文
- css - 将自定义字体安装到 WP 中不起作用
- python - 如何在不使用 find 函数的情况下获取字符串中每个字符的位置
- sharepoint - 随机化问题和存储以供以后检索
- python-3.x - pip 在特定的 python 环境中被杀死