Reactjs 从输入中添加的Ant design react类型脚本不需要'；行不通

我试图将

react-Typescript

项目添加到所需的输入中，但它不起作用

此处出错

---

当我添加这个

const{getFieldDecorator}=this.props.form时

我面临以下错误

TS2339:类型“Readonly&Readonly”上不存在属性“form”。

有人知道如何正确地解决这个问题吗

这里是我的代码

    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>
        );
      }
    }

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
从“antd”导入{表单、输入、按钮、复选框}；
常量formItemLayout={
labelCol:{span:4}，
wrapperCol:{span:8}，
};
const formTailLayout={
labelCol:{span:4}，
包装列：{span:8，偏移量：4}，
};
导出类DynamicRule扩展React.Component{
检查=（）=>{
this.props.form.validateFields（err=>{
如果（！err）{
console.info（“成功”）；
}
});
};
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[
{
要求：正确，
信息：“请输入您的姓名”，
},
],
})()}
检查
);
}
}
基于您下面的评论。我已获取您的原始代码，并在状态中添加了一个具有默认值的构造函数：

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

我还添加了handleChange，因为代码中有handleChange，但它不起作用：

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

以下是完整的工作示例：

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{表单、输入、按钮、复选框}；
类DynamicRule扩展了React.Component{
//为checkNick添加了构造函数和默认值
建造师（道具）{
超级（道具）
此.state={
尼克：错
}
}
检查=（）=>{
this.props.form.validateFields（err=>{
如果（！err）{
console.info（“成功”）；
}
});
};
//添加了手动更改
handleChange=（e）=>{
this.setState（{checkNick:e.target.checked}）
}
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[
{
要求：正确，
信息：“请输入您的姓名”，
},
],
})()}
{getFieldDecorator（'昵称'{
规则：[
{
必填项：this.state.checkNick，
消息：“请输入您的昵称”，
},
],
})()}
昵称是必需的
检查
);
}
}
const WrappedDynamicRule=Form.create（{name:'dynamic_rule'}）（DynamicRule）；
ReactDOM.render（，document.getElementById（'container'））；
对于antd的v3，传入
FormComponentProps
泛型参数可以解决您的问题

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

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

从'antd/lib/form'导入{FormComponentProps}
导出类DynamicRule扩展React.Component{
// ...
}
通过查看代码和依赖关系，我相信您使用的是Ant Design版本4。在版本4中，您可以在表单中设置规则。如下所示：

 //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>

//验证程序
函数handleTextValidation（规则：任意、值：任意、回调：任意）{
console.log（值）
常量字母=/^[A-Za-z\s]+$/；
如果（！values.match（字母））
回拨（“请只输入字母”）；
其他的
回调函数（）
}
你能用ReactDOM.render更新你的堆栈blitz示例吗？这样我们就可以有一个最终的示例。
const{getFieldDecorator}=this.props.form您如何在示例中设置道具？这是您的根组件，它不包含任何道具。您好，我尝试过，它不工作，我升级到v3到v4，但一些组件不工作，有没有v3的解决方案？示例就在这里。v3和v4都有。我不知道你有什么问题。查看您的原始代码，我会认为您没有正确构建react组件。分享一些代码，我会看看是否可以识别您的issueDear@core114，请不要更改在线重新制作源代码。或在工作后恢复所有更改。我阅读了你的代码15分钟，但毕竟我意识到你改变了一些东西。@Amerlica您好，我试图为我的项目@Salminskendrovic添加此验证，这是我的冲突：当我添加
const{getFieldDecorator}=this.props.form时获取此错误
TS2339:类型“Readonly&Readonly”上不存在属性“form”。
import { FormComponentProps } from 'antd/lib/form'

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

 //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>