如何解决当状态/属性更改时,Antd 3.26表单验证消息不会重新呈现新值
我有一个使用Antd 3.26的React应用程序(我无法将其迁移到新版本)。在这个应用程序中,我有一个简单的翻译功能。用户可以通过select更改语言,并且UI会使用从json文件获取的标签进行更新。在这里,我遇到了这个问题:
提交表单时,除验证消息外,所有标签均更新为新语言。我相信这是标签组件无法重新渲染的问题,但是我不知道如何解决或修复它。
这是我为这个问题制作的测试应用程序中的代码,用于说明我的问题:
import React,{ Component } from 'react';
import './App.css';
import { Form,Input,Button } from 'antd';
class App extends Component {
state = {
validationNameMessage: "Please input your name",validationPasswordMessage: "Please input your password",}
onBtnClick = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err,values) => {
// here is a simulated "request" to my backend server to get translation
setTimeout(() => this.setState({ validationNameMessage: "Podaj nazwe",validationPasswordMessage: "Podaj haslo" }),2000)
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div className="App">
<div className="form-container">
<Form name="test-form">
<Form.Item label="Name">
{getFieldDecorator("name",{
rules: [
{
required: true,message: this.state.validationNameMessage
}
]
})(<Input />)}
</Form.Item>
<Form.Item style={{ marginTop: 12 }} label="Password">
{getFieldDecorator("password",message: this.state.validationPasswordMessage
}
]
})(<Input />)}
</Form.Item>
<Form.Item>
<Button onClick={this.onBtnClick} style={{ marginTop: 12 }} type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div>
</div>
);
}
}
export default Form.create({ name: 'test-form' })(App);
解决方法
您提供的示例的问题在于,未翻译的验证已在翻译到达之前进行了渲染,因此,只有在翻译到达后重新触发验证时才会显示。
一种可能的解决方案是使用Form API中的setFields
方法。您可以在将状态设置为状态后立即触发转换后的验证,如下所示:
this.setState(
{
validationNameMessage: "Podaj nazwe",validationPasswordMessage: "Podaj haslo"
},//callback that triggers after the state has been updated
() => {
this.props.form.setFields({
name: {
value: values.name,errors: [
// only show the validation error if there is no value in the field
...(values.name
? []
: [new Error(this.state.validationNameMessage)])
]
},password: {
value: values.password,errors: [
...(values.name
? []
: [new Error(this.state.validationPasswordMessage)])
]
}
});
}
);
这仍然会在短时间内(在您的示例中为2秒)刷新未翻译的验证,但是一旦到达它们,便会切换到已翻译的验证。
Here is a sandbox demonstrating the suggested solution with the example you provided。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。