在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ antd里有如下的邏輯沒看看懂,麻煩幫忙解釋一下?

antd里有如下的邏輯沒看看懂,麻煩幫忙解釋一下?

1.我最想知道下面這些代碼具體啥意思沒看懂,
2.我需要通過antd里的例子給他做擴展,需要點擊添加按鈕,加上倆個輸入框,antd里面只加了一個

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 = () => {

uuid++;
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat(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);

回答
編輯回答
逗婦惱

圖片描述

keys是你map的數(shù)據(jù), key={index},我覺得應該是這里的問題吧

2018年2月23日 07:08
編輯回答
久愛她

formItems是啥

2017年1月15日 06:24
編輯回答
礙你眼

哪里沒看懂呢?
頁面上表單的個數(shù),取決于一個名稱為keysfield.這個屬性的值為幾,頁面就渲然幾個FormItem,代碼中是用keys.map來實現(xiàn)的。
提醒一點呢,這種動態(tài)加載FormItem的,一定要固定FormItemkey

2017年11月30日 09:08