Реагировать на размещение размещения

Question

Я рассмотрел несколько источников для использования функций onSubmit в React, и они всегда помещают триггеры onSubmit в качестве атрибута формы, например,

import React, { Component } from "react";

import { connect } from "react-redux";
import PropTypes from "prop-types";
import { register } from "../../../actions/auth/auth.action";

import { Container } from "react-bootstrap";
import {
    Button,
    Form,
    Label,
    Input,
  } from "reactstrap";

class Register extends Component {
    state = {
        fname: "",
        lname: "",
        email: "",
        password: ""
    };

    static propTypes = {
        register: PropTypes.func.isRequired
    };

    handleChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    handleSubmit = e => {
        e.preventDefault();

        const { fname, lname, email, password } = this.state;

        const newUser = {
            name: {
                first: fname,
                last: lname
            },
            email: {
                address: email
            },
            password
        };

        // Attempt to register user
        this.props.register(newUser);
    };

    render() {
        return(
                        <Form onSubmit={this.handleSubmit}>
                                <Label for="fname">First Name</Label>
                                <Input
                                    type="text"
                                    name="fname"
                                    id="fname"
                                    placeholder="Enter first name"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="lname">Last Name</Label>
                                <Input
                                    type="text"
                                    name="lname"
                                    id="lname"
                                    placeholder="Enter last name"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="email">Email</Label>
                                <Input
                                    type="email"
                                    name="email"
                                    id="email"
                                    placeholder="Enter email"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="password">Password</Label>
                                <Input
                                    type="password"
                                    name="password"
                                    id="password"
                                    placeholder="Enter password"
                                    className= "mb-3"
                                    onChange={this.handleChange}
                                />
                                <Button color="primary" style={{ marginTop: "2rem" }} block>
                                    Register
                                </Button>
                        </Form>
        );
    };
};

const mapStateToProps = state => ({
    error: state.error   
});

export default connect(
    mapStateToProps,
    { register }
)
(Register);

Однако, когда я пытаюсь это сделать, нет способа вызватьфункция. (То есть, как кнопка "знает", когда вызывать функцию onSubmit, когда вызов является атрибутом формы) Я даже пытался добавить к кнопке атрибут type = "submit", но он тоже не работает.

Answer 1

Функция будет вызвана, когда произошло событие отправки.

Ниже кода показаны действия, которые вызывают событие отправки.

class FormComponent extends React.Component {

  handleSubmit = e => {
    e.preventDefault();
    console.log('submitted');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="submit" /><br />
        <button>Button with no attribute</button><br />
        <button type="submit">submit typed Button</button><br />
        <button type="button">button typed Button (no submit)</button><br />
        <input type="text" value="Press enter to submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FormComponent />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

Просто объявите type = "submit" в вашей кнопке <button type="submit">send stuff</button> Атрибут type - это то, чего ожидает форма onSubmit :), удалите e.preventDefault из вашего handleSubmit метода и повторите попытку