Question

我尝试将react Typescript项目添加到Antdeisgn forms输入中，因为它不起作用。

此处错误 当我添加此const { getFieldDecorator } = this.props.form;

时

我遇到以下错误

  TS2339: Property 'form' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

任何人都知道如何正确解决该问题 stack blitz here

我的代码在这里

    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import { Form, Input, Button, Checkbox } from 'antd';

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8 },
    };
    const formTailLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8, offset: 4 },
    };
  export  class DynamicRule extends React.Component<any> {


      check = () => {
        this.props.form.validateFields(err => {
          if (!err) {
            console.info('success');
          }
        });
      };



      render() {
        const { getFieldDecorator } = this.props.form;
        return (
          <div>
            <Form.Item  label="Name">
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your name',
                  },
                ],
              })(<Input placeholder="Please input your name" />)}
            </Form.Item>


            <Form.Item >
              <Button type="primary" onClick={this.check}>
                Check
              </Button>
            </Form.Item>
          </div>
        );
      }
    }

Answer 1

对于antd v3，传递FormComponentProps通用参数可以解决您的问题。

import { FormComponentProps } from 'antd/lib/form'

export class DynamicRule extends React.Component<FormComponentProps> {
  // ...
}

Answer 2

根据您的以下评论。我已经采用了原始代码，并向状态添加了具有默认值的构造函数：

// Added constructor and default value for checkNick
  constructor(props) {
    super(props)
    this.state = {
      checkNick: false
    }
  }

并且我还添加了handleChange，因为您在代码中包含了它，但是它不起作用：

  // Added handleChange
  handleChange = (e) => {
    this.setState({checkNick: e.target.checked})
  }

以下是完整的工作示例：https://stackblitz.com/edit/react-hkzvcx-bbuv6y

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';


class DynamicRule extends React.Component {

  // Added constructor and default value for checkNick
  constructor(props) {
    super(props)
    this.state = {
      checkNick: false
    }
  }


  check = () => {
    this.props.form.validateFields(err => {
      if (!err) {
        console.info('success');
      }
    });
  };

  // Added handleChange
  handleChange = (e) => {
    this.setState({checkNick: e.target.checked})
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form.Item  label="Name">
          {getFieldDecorator('username', {
            rules: [
              {
                required: true,
                message: 'Please input your name',
              },
            ],
          })(<Input placeholder="Please input your name" />)}
        </Form.Item>
        <Form.Item label="Nickname">
          {getFieldDecorator('nickname', {
            rules: [
              {
                required: this.state.checkNick,
                message: 'Please input your nickname',
              },
            ],
          })(<Input placeholder="Please input your nickname" />)}
        </Form.Item>
        <Form.Item >
          <Checkbox checked={this.state.checkNick} onChange={this.handleChange}>
            Nickname is required
          </Checkbox>
        </Form.Item>
        <Form.Item >
          <Button type="primary" onClick={this.check}>
            Check
          </Button>
        </Form.Item>
      </div>
    );
  }
}

const WrappedDynamicRule = Form.create({ name: 'dynamic_rule' })(DynamicRule);
ReactDOM.render(<WrappedDynamicRule />, document.getElementById('container'));

Answer 3

通过查看代码和依赖关系，我相信您正在使用Ant Design 版本4 。在版本4中，您可以在Form.Items中设置规则，如下所示：

 //Validators
  function handleTextValidation(rule:any,values:any,callback:any){
    console.log(values)
    const letters = /^[A-Za-z\s]+$/;
    if(!values.match(letters))
      callback("Please enter only letters");
    else
      callback()
  }

<Form.Item
name={['consignee', 'name']}
label="Consignee Name"
rules={[
  {
    required: true,
    message: 'This field is required!'
  },{ 
    message: 'The input should contain only letters',
    validator: handleTextValidation
  }
]}
hasFeedback={true}
  >
  <Input />
  </Form.Item>

蚂蚁设计反应从所需输入添加的TypeScript不起作用

3 个答案: