- has done a project with react and antd components. When the dynamic form is needed, the from dynamic form of the antd official website (below)
inputAdd field
2. inputinitialValue
when you click Add field, the default value of the following input is also Zhang Xiaopang.
what I want to achieve now is to display two different pieces of data on input by default, and then click Add field. The input that appears has no default value
is there a big boss to help solve it? Urgent, urgent
the following is the official code, which I used directly in the project. There is no change to
import {Form, Input, Icon, Button} from "antd";
const FormItem = Form.Item;
let uuid = 0;
class DynamicFieldSet extends React.Component {
remove = (k) = > {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue("keys");
// We need at least one passenger
if (keys.length === 1) {
return;
}
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});}
add = () = > {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue("keys");
const nextKeys = keys.concat(uuid);
uuidPP;
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});}
handleSubmit = (e) = > {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});}
render () {
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
};
getFieldDecorator("keys", { initialValue: [] });
const keys = getFieldValue("keys");
const formItems = keys.map((k, index) => {
return (
<FormItem
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? "Passengers" : ""}
required={false}
key={k}
>
{getFieldDecorator(`names[${k}]`, {
validateTrigger: ["onChange", "onBlur"],
rules: [{
required: true,
whitespace: true,
message: "Please input passenger"s name or delete this field.",
}],
})(
<Input placeholder="passenger name" style={{ width: "60%", marginRight: 8 }} />
)}
{keys.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
disabled={keys.length === 1}
onClick={() => this.remove(k)}
/>
) : null}
</FormItem>
);
});
return (
<Form onSubmit={this.handleSubmit}>
{formItems}
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={this.add} style={{ width: "60%" }}>
<Icon type="plus" /> Add field
</Button>
</FormItem>
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
);}
}
const WrappedDynamicFieldSet = Form.create () (DynamicFieldSet);
ReactDOM.render (< WrappedDynamicFieldSet / >, mountNode);