Блог

Я создаю веб-приложение, используя Django rest framework на серверной части и React на интерфейсе. Я также использую Ant Design, чтобы помочь с оформлением. Я следил за руководством на Youtube, но в настоящее время я сталкиваюсь с некоторыми проблемами при попытке отправить форму для создания новой статьи. Я выполнил некоторые действия по устранению неполадок, и я считаю, что проблема связана с функцией отправки формы. Я попытался добавить onClick к кнопке, чтобы убедиться, что щелчок распознается, и это сработало должным образом, поэтому я считаю, что проблема связана с onSubmit. Прямо сейчас все, что я пытаюсь сделать, это распечатать элементы формы на консоли. Я супер новичок в разработке веб-приложений, поэтому буду признателен за любую помощь.

 import React from 'react';
import { Form, Input, Button } from 'antd';


class CustomForm extends React.Component {

    handleFormSubmit = (event, requestType, articleID) => {
        //event.preventDefault();
        const title = event.target.elements.title.value;
        const content = event.target.elements.content.value;

        console.log(title, content);
    }

    render() {
        return (
            <div>
                <Form
                    onSubmit={event =>
                        this.handleFormSubmit(
                            event,
                            this.props.requestType,
                            this.props.articleID
                        )
                    }
                >
                    <Form.Item label="Title">
                        <Input name="title" placeholder="Enter a Title" />
                    </Form.Item>
                    <Form.Item label="Content">
                        <Input name="content" placeholder="Enter the content of the announcement here" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">{this.props.btnText}</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
};

export default CustomForm;
  

Проблема в том, что, onSubmit согласно antd документу, он должен быть onFinish здесь, а также вам нужно передать name вместе с label в <Form.Item> :

Вот код:

 const Demo = () => {
  const onFinish = (values) => {
    console.log("Success:", values);
    //Can directly call props here
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item label="Title" name="title">
        <Input name="title" placeholder="Enter a Title" />
      </Form.Item>
      <Form.Item label="Content" name="content">
        <Input
          name="content"
          placeholder="Enter the content of the announcement here"
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

  

Вот демонстрация:https://codesandbox.io/s/competent-violet-opwlh?file=/index.js

В моем случае я использовал обычный, <form> с элементами, управляемыми Ants <Input> , поскольку форма не отправлялась и входные данные не контролировались.

 /**
 * Component's state
 */
interface LoginSignUpState {
    username: string,
    password: string
}

export class LoginSignUpForm extends React.Component<{}, LoginSignUpState> {
    constructor (props) {
        super(props)

        this.state = {
            username: '',
            password: ''
        }
    }


    /**
     * Updates the component state from the user input
     * @param e Change event
     */
    handleInputChange = (e) => {
        this.setState<never>({ [e.target.name]: e.target.value })
    }


    /**
     * Checks that the login form is valid!
     * @returns True if the login form is valid, false otherwise
     */
    loginFormIsValid (): boolean {
        return this.state.username.trim().length > 0 amp;amp;
            this.state.password.trim().length > 0
    }

    handleSubmit = (e) => {
        if (!this.loginFormIsValid()) {
            e.preventDefault()
        }
    }

    render () {
        return (
            <form
                method='POST'
                onSubmit={this.handleSubmit}
                action={urlAuthenticate}
            >
                <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="Username"
                    className='margin-bottom-2'
                    name='username'
                    value={this.state.username}
                    onChange={this.handleInputChange}
                />

                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    value={this.state.password}
                    type="password"
                    className='margin-bottom-2'
                    name='password'
                    placeholder="Password"
                    onChange={this.handleInputChange}
                />

                <Button type="primary" htmlType="submit" disabled={!this.loginFormIsValid()}>
                    Log in
                </Button>
            </form>
        )
    }
}