Реакция муравья. TypeScript, добавленный из ввода, необходим - PullRequest
Новая
       17

Реакция муравья. TypeScript, добавленный из ввода, необходим

0 голосов
/ 30 марта 2020

Я пытался добавить react Typescript проект к Antdeisgn формы требуется ввод, он не работает.

ошибка здесь , когда я добавил это const { getFieldDecorator } = this.props.form;

я столкнулся со следующей ошибкой 

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

кто-нибудь знает, как исправить это правильно стек блиц здесь

Мой код здесь 

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

Ответы [ 2 ]

2 голосов
/ 02 апреля 2020

Для v3 antd, передача аргумента FormComponentProps generi c может решить вашу проблему. 

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

export class DynamicRule extends React.Component<FormComponentProps> {
  // ...
}
1 голос
/ 30 марта 2020

На основании вашего комментария ниже. Я взял ваш исходный код и добавил в состояние конструктор со значением по умолчанию: 

// 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'));
...