Почему onSubmit не отправляет форму, когда я передаю ее в элемент формы. Но он отправляется, когда я передаю его в элементе кнопки в React - PullRequest
Новая
       13

Почему onSubmit не отправляет форму, когда я передаю ее в элемент формы. Но он отправляется, когда я передаю его в элементе кнопки в React

0 голосов
/ 15 апреля 2020

У меня есть вопрос. Я пишу в React, кстати. Поэтому, когда я передаю обработчик onSubmit в элементе формы, он не отправляет форму, когда я нажимаю «добавить задачу». Однако, когда я передаю обработчик в элемент кнопки, он отправляет форму? Пожалуйста, смотрите ниже для кода. Я включил файл дочернего компонента, который вложен в форму на всякий случай: 

// TodoForm,js
import React from "react";
import PrioritySelector from "./PrioritySelector";
import { connect } from "react-redux";

class TodoForm extends React.Component {


    state = {
        priorityLevel: null
    }

    /*submit handler to grab input from the input references and store them
    in the "todoData" object. Then dispatches an action type and payload
    capturing the data. Then clears the input*/
    handleSubmit=( e )=> {
       e.preventDefault()
        const todoTitle = this.getTodoTitle.value;
        const description = this.getDescription.value;
        const priorityLevel = this.state.priorityLevel;
        const todoData = {
            id: Math.floor(Math.random()*1000),
            todoTitle,
            description,
            priorityLevel,
            editing: false
        }
        this.props.dispatch({type:"ADD_TODO", todoData })
        this.getTodoTitle.value = "";
        this.getDescription.value = "";

    }


    getData=(priorityLevels)=> {
        const data = priorityLevels;
        this.setState({
            priorityLevel: data
        })
    }

    render() {
        return(
            <div>
                <form>
                    <input type="text" ref={(input)=> this.getTodoTitle=input} placeholder="Enter Todo" required/>
                    <input type="text" ref={(input)=> this.getDescription=input} placeholder="Enter Description" required/>
                    <PrioritySelector getData={this.getData} />
                    <button onClick={this.handleSubmit} type="button">Add Todo</button>
                </form>
            </div>
        )
    }
}

export default connect()(TodoForm);



// PrioritySelecter.js
import React from "react";
import $ from "jquery";
import { connect } from "react-redux";

class PrioritySelector extends React.Component  {


    componentDidMount() {
        $("#selector").show();
    }

    handleSelect =(e)=> {
       const priorityLevel = this.getPriorityLevel.value;
       this.props.getData(priorityLevel);
       console.log(priorityLevel)
    }

    render() {
        return(
            <div>
                <div className="input-field col s12">
                    <select onChange={this.handleSelect} ref={(option)=> this.getPriorityLevel = option} id="selector">
                        <option disabled defaultValue>Choose your option</option>
                        <option value="1">Low</option>
                        <option value="2">Medium</option>
                        <option value="3">High</option>
                    </select>
                </div>
            </div>
        )
    }

}


const mapStateToProps=(state)=> {
    return {
        priorityLevel: state
    }
}


export default connect(mapStateToProps)(PrioritySelector);

1 Ответ

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

Ваша кнопка type = "button", поэтому она не будет отправлять форму. Измените его на type = "submit" и поместите обработчик в форму.

...