鍍金池/ 問答/HTML/ antd from動態(tài)表單輸入框默認值(多個)如何設置

antd from動態(tài)表單輸入框默認值(多個)如何設置

  1. 用react結合antd組件做了一個項目,在需要動態(tài)表單這一塊時候,用了antd官網(wǎng)的from動態(tài)表單(下圖)

clipboard.png(一開始是沒有input出現(xiàn)的,點擊一下Add field就會出現(xiàn)一個)

clipboard.png

2.今天在測試項目的時候,(有添加,列表和編輯頁面, 從列表頁面點擊數(shù)據(jù)可以進入編輯頁面,并且傳遞你點擊的那條數(shù)據(jù)的所有東西), 我在測試的時候就發(fā)現(xiàn),動態(tài)表單上input的默認值一條數(shù)據(jù)還可以設置(initialValue),當數(shù)據(jù)多了的時候,就不行了。

clipboard.png
點擊Add field的時候,下面的input的默認值也是 張小胖 。
我現(xiàn)在想要實現(xiàn)的功能就是 默認顯示兩條不一樣的數(shù)據(jù)在input上, 再點擊Add field的出現(xiàn)的input是沒有默認值的

有沒有大佬幫忙解決一下?。。。。。。。。。?!急,,,,十萬火急
下面這個是官方的代碼,我在項目中也是直接拿過來就用的 沒有改動
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);
uuid++;
// 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);

回答
編輯回答
野橘

第一,FormItem中需要搭配getFieldDecorator一起使用。
第二,所有的FormItemgetFieldDecoratorname不能重復,最好和表單feild名稱一樣。
第三,動態(tài)新增的FormItem,也要確保getFieldDecoratorname不能和以前的重復。
第四,動態(tài)新增的FormItem的元素,最好指定惟一的key.比如:<Input key={'only key'} />

2017年8月29日 08:17