I'm using antd
design in my form.
Here I'm setting value from reducer profilereducer
by using shouldComponentUpdate
method.
class ProfileForm extends Component {
componentDidMount = () => {
this.props.actions.getprofile()
}
shouldComponentUpdate = (nextProps) => {
if (this.props.profile) {
this.props.form.setFieldsValue({
name: this.props.profile.name,
});
} else {
this.props.form.setFieldsValue({
firstname: 'loading',
});
}
}
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
<Form layout="vertical">
<FormItem label="First Name" >
{getFieldDecorator('name', { rules: [{ required: true, message: 'Required!', }], })(
<Input addonBefore={selectBefore} placeholder="First Name" />
)}
</FormItem>
</Form>
}
function mapStateToProps(state) {
return {
profile: state.profilereducer.profile,
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
const Profile = Form.create()(ProfileForm);
export default connect(mapStateToProps, mapDispatchToProps)(Profile);
}
Error:
valuePropName is the name of the prop of the child component that will contain the value. In most cases, components such as Input or Select use value as the prop for holding the value. However, certain components such as Checkbox or Switch use checked .
wrapperCol: It is used to denote the layout for input controls. onFieldsChange: It is a callback function that is triggered when the field updated. onFinish: It is a callback function that is triggered after submitting the form and verifying data successfully.
getFieldDecorators is a Two-way binding for form . There is no getFieldDecorators in React, this is an ant-design API.
You are setting state in a loop, hence you got the error. Here is a better approach of dealing it.. I just left selectBefore as a variable(in your code, i haven't found setting it).. Change it to string if you get error..
componentDidMount = () => {
this.props.actions.getprofile()
}
renderBasicform(initialVal) {
const { getFieldDecorator, getFieldValue } = this.props.form;
return (
<Form layout="vertical">
<FormItem label="First Name" >
{getFieldDecorator('name', { initialValue: initialVal,rules: [{ required: true, message: 'Required!', }], })(
<Input addonBefore={selectBefore} placeholder="First Name" />
)}
</FormItem>
</Form>
);
}
render() {
if(!this.props.profile) {
return (
<div>
{this.renderBasicform("Loading")}
</div>
);
}
return (
<div>
{this.renderBasicform(this.props.profile.name)}
</div>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With