我为我的React(TypeScript)应用程序提供了以下模型:
interface IProjectInput {
id?: string;
name: string | i18n;
description: string | i18n;
}
export interface i18n {
[key: string]: string;
}
我使用Formik
和react-bootstrap
从Form
创建一个新的ProjectInput
:
import { i18n as I18n, ... } from 'my-models';
interface State {
validated: boolean;
project: IProjectInput;
}
/**
* A Form that can can edit a project
*/
class ProjectForm extends Component<Props, State> {
constructor(props: any) {
super(props);
this.state = {
project: props.project || {
name: {},
description: ''
},
validated: false
};
}
async handleSubmit(values: FormikValues, actions: FormikHelpers<IProjectInput>) {
let project = new ProjectInput();
project = { ...project, ...values };
console.log("form values", values);
// actions.setSubmitting(true);
// try {
// await this.props.onSubmit(project);
// } catch (e) { }
// actions.setSubmitting(false);
}
render() {
const { t } = this.props;
const getCurrentLng = () => i18n.language || window.localStorage.i18nextLng || '';
const init = this.state.project || {
name: {},
description: ''
};
return (
<div>
<Formik
// validationSchema={ProjectInputSchema}
enableReinitialize={false}
onSubmit={(values, actions) => this.handleSubmit(values, actions)}
initialValues={init}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
errors,
isSubmitting,
setFieldTouched
}) => {
return (
<div className="project-form">
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md={{span: 5}} controlId="projectName">
<Form.Label>
{t('projectName')}
</Form.Label>
// Input for ENGLISH text
<Form.Control
type="text"
name="name"
value={(values['name'] as I18n).en}
onChange={handleChange}
/>
// Input for FRENCH text
<Form.Control
type="text"
name="name"
value={(values['name'] as I18n).fr}
onChange={handleChange}
/>
</Form.Group>
所以最后它应该看起来像:
{
"name": {
"en": "yes",
"fr": "oui"
},
"description" : "test",
...
}
我的问题是,name
输入的值保持为空。
我尝试在我的render
或state
中添加const init = this.state.project || { name: { 'en': '' },
,但这没有做任何事情。
2条答案
按热度按时间igsr9ssn1#
TL;DR
在
Form.Control
中将propname
更改为name.en
/name.fr
首先,
initialValues
是一个prop,除非你传递propenableReinitialize
,否则它将被设置并且不会改变。所以执行this.state.project || { name: { 'en': '' }
并不好,因为它只会假设第一个值,它可以是this.state.project
或{ name: { 'en': '' }
,但你永远不会知道。其次,为了解决您的问题,如果您查看有关
handleChange
的文档:常规输入更改事件处理程序。这将更新
values[key]
,其中key是事件发出输入的name
属性。如果name
属性不存在,handleChange
将查找输入的id
属性。注意:“输入”在这里指的是所有HTML输入。但是在
Form.Control
中,将name
属性作为name="name"
传递。所以它试图更新
name
而不是name.en
。你该换衣服了
到
下面的文档说明了为什么应该使用
name.en
而不仅仅是name
。9gm1akwq2#
在docs https://formik.org/docs/guides/arrays中描述