标签: ant-design-pro

我使用 react 创建了一个注册页面。在那里我使用了以下注册表。https://ant.design/components/form。所有验证都得到了正确处理，成功尝试后用户可以注册到系统。我遇到的唯一问题是，提交后无法清除表单输入字段值。

我已经实现了一种将表单字段值清除为空的方法。但它不起作用。我在stackoverflow中尝试了以前的类似问题，但仍然无法为我找到一个可行的问题。原因可能是因为我使用了 ant 设计模板。

this.setState({
        confirmDirty: false,
        autoCompleteResult: [],
        userName: '',
        email: '',
        experience: [],
        password: ''
})

上面的代码是清除输入值。但它不起作用，所有表单输入字段的值都保持保存状态。以下是注册表单代码的一部分。

class RegistrationForm extends React.Component {
state = {
    confirmDirty: false,
    autoCompleteResult: [],
    userName: '',
    email: '',
    experience: [],
    password: ''
};
//below form is inside the render method and return 
<Form onSubmit={this.handleSubmit}>
  <FormItem
    {...formItemLayout}
    label="E-mail"
  >
  {getFieldDecorator('email', {
     rules: [{
        type: 'email', message: 'The input is not valid E-mail!',
     }, {
        required: true, message: 'Please input your …

我正在使用 React 和Ant Design，并且我想禁用一个 Form.Item用户名字段。请参阅下面我的示例代码，

<Form.Item disabled style={{ padding: '0px 20px' }}>
    {getFieldDecorator('username', {
        initialValue: this.state.userInfo.username,
        validate: [
            {
                trigger: ['onChange', 'onBlur'],
                rules: [
                    {
                        required: true,
                        message: t('pleaseInput.username'),
                    }
                ],
            },
        ],
    })
</Form.Item>

如何在蚂蚁设计中异步验证表单字段？

 <FormItem>
     {getFieldDecorator('zipcode', {
       initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
       rules: [
         // { required: true, message: 'Please input your Zipcode' },
         { validator: this.handlezipCodeChange },
       ],
     })(
       <Input
         prefix={
           <Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
         }
         type="number"
         placeholder="Zipcode"
         // onChange={this.handlezipCodeChange}
       />
     )}
</FormItem>

函数调用

  handlezipCodeChange = (rule, value, callback) => {
    if (!value) {
      callback('Please input your zipcode');
    }
    if (value.length < 5) {
      callback('Please enter minimum length of 5');
    }
    if (value.length > …

我想自定义一些用cssinjs编写的antd组件的样式。

我创建了一个 HOC 组件来访问主题并覆盖一些样式并在定义提供程序后调用它

import { useToken, useStyleRegister } from 'antd/es/theme/internal'
import { prefixCls } from 'Src/constants'
import { ReactNode } from 'react'
import { CSSObject } from '@ant-design/cssinjs'
import { GlobalToken } from 'antd/es/theme/interface'



function getStyleButton(token: GlobalToken): CSSObject {
  return {
    [`.${prefixCls}-btn`]: {
      ['&-default']: {
        backgroundColor: 'transparent '
      }
    }
  }
}



export const OverloadStyle = (props: { children: ReactNode }) => {
  const [theme, token, hashId] = useToken()

  useStyleRegister(
    {
      theme,
      token,
      hashId,
      path: ['OverloadStyle']
    },
    () => …

我是 Ant-design 的新手。目前我正在从事 ReactJs 项目，并且已经Steps在我的项目中使用过。我想改变 的颜色，Steps但不知道怎么可能。我将分享 ant-design ( Steps) 代码。请帮帮我
谢谢

您可能会Steps在此代码和框中看到示例

代码

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Steps, Button, message } from 'antd';

const Step = Steps.Step;

const steps = [{
  title: 'First',
  content: 'First-content',
}, {
  title: 'Second',
  content: 'Second-content',
}, {
  title: 'Last',
  content: 'Last-content',
}];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0, …

Ant设计的Tree select默认按值搜索，有没有办法按标题搜索？我尝试过使用onSearch函数，但它不会改变树选择的任何行为

我试图以编程方式提交和蚂蚁设计（v4.3.4）形式验证，但form.validateFields()总是失败，outOfDate: true如果它里面onValuesChange()。（这个表单是一个更大的表单工厂的一部分，所以我最终必须将表单组件传递给一个 props 函数，然后该函数将调用提交。

const FormA = (props: StepProps) => {
  const [form] = useForm();

  return (
    <Form
      form={form}
      name="form-a"
      onValuesChange={async (changedValues, allValues) => {
        form.validateFields().
         then(values => console.log("PASSED").
         catch(errorInfo => console.log("FAILED", errorInfo));
      }}
    >
      <Form.Item 
      rules={[{ required: true }]} 
      name="item-a">
        <Input />
      </Form.Item>
      <Form.Item
        rules={[{ required: true }]}
        name="item-b"
      >
        <Input />
      </Form.Item>
      <Form.Item
        rules={[{ required: true }]}
        name="item-c"
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default FormA;

我已经调用了form.validatedField()函数 onValuesChange。我从来没有在控制台中得到“PASSED”，即使所有输入都有值，我总是得到“FAILED”，并显示以下错误信息： …

我正在尝试使用 Ant design v4.0 制作一个表单。Form.Item（输入文本）的显示取决于其他 Form.Item（单选按钮组）的值。我正在使用form.getFieldValue('fieldname')并且它最初可以工作，但是当我更改单选按钮 Botton 组的值时，该字段仍然显示。

代码与此类似

(...)
const [form] = useForm();
(...)
<Form form={form} (...)>
    <Form.Item name="fieldname" initialValues={props.initialValues}>
        // Here it is a radio button group
    </FormItem>
    { form.getFieldValue('fieldname') === 'a_value' && (
        <Form.Item name="a-text-field> 
              // here it is an input text
        </Form.Item>
    )}
</Form>

正如我之前所说，它适用于初始值，但如果我更改了选项，它就不起作用。我也尝试了 a-text-field 字段中的 prop，但它不起作用

hidden={form.getFieldValue('fieldname') !== 'a_value'}

Warning: Icon should have `type` prop or `component` prop or `children`. \nHow to troubleshoot the issue\xef\xbc\x9f\n\nimport React from \'react\';\nimport { bindActionCreators,createStore } from \'redux\';\nimport { Link, browserHistory } from \'react-router\';\nimport { connect } from \'react-redux\';\nimport actions from \'../../actions/information/inforResource.js\';\nimport Dropdown from \'../../components/common/dropdown.js\';\nimport ListSearch from \'../../components/common/listSearch.js\';\nimport moment from \'moment\';\nimport {Modal, Icon, Button, Row, Col, Form, DatePicker, Select, Table, Input, Pagination, Menu, Tooltip, Drawer, message, Avatar} from \'antd\';\n\n<Icon type="delete"/>\n

我删除了页面的图标标签，仍然报错。\n我删除了子组件中的图标标签，仍然报错。

react.development.js?99ee:335 \nWarning: Icon should have `type` prop or \n`component` prop or …

我正在使用 Axios 处理文件上传。我在显示文件上传的上传进度时遇到问题。我使用的文件上传视图是“图片卡”。

HTML

<Upload
  accept="image/*"
  customRequest={uploadImage}
  onChange={handleOnChange}
  listType="picture-card"
  fileList={defaultListOfFiles}
  className="image-upload-grid"
>
  {defaultListOfFiles.length >= 8 ? null : <div>Upload Button</div>}
</Upload>

OnChangeHandler

const handleOnChange = ({ file, fileList, event }) => {
  console.log(file, fileList, event);
  //Using Hooks to update the state to the current filelist
  setDefaultFileList(fileList);
  //filelist - [{uid: "-1",url:'Some url to image'}]
};

自定义请求处理程序

const uploadImage = options => {

  const { onSuccess, onError, file, onProgress } = options;

  const fmData = new FormData();
  const config = {
    headers: …