Как передать параметр события в дополнение к вашим собственным пользовательским параметрам в React, когда пользовательский параметр получает данные от дочернего компонента

Question

Я программирую в React и передаю данные между родительским (TodoForm. js) и дочерним (PrioritySelector. js) компонентом. В этом случае я хочу получить данные от дочернего компонента, поэтому я передал свой пользовательский параметр в функцию «handleSubmit» и передал эту функцию дочернему компоненту в качестве подпорки (getData = {this.handleSubmit}). Теперь я могу получить данные из дочернего компонента, однако, когда я хочу передать параметр «e» для аргумента e.preventDefault, он выдает ошибку. Например TypeError: e не является функцией. Кто-нибудь знает, как я могу передать эти два параметра (пользовательский параметр и параметр события) в одном методе? Спасибо. Мой код ниже. Спасибо!

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

class TodoForm extends React.Component {


    /*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=( priorityLevelData, e)=> {
       e.preventDefault()
        const todoTitle = this.getTodoTitle.value;
        const description = this.getDescription.value;
        const priorityLevel = priorityLevelData;
        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 = "";
    }

    render() {
        console.log(this.props, "TODOFORMPROPS")
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <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.handleSubmit} />
                    <button>Add Todo</button>
                </form>
            </div>
        )
    }
}



export default connect()(TodoForm);



    // PrioritySelector.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, e)
    }

    render() {
        console.log(this.props)
        return(
            <div>
                <div className="input-field col s12">
                    <select onChange={this.handleSelect} ref={(option)=> this.getPriorityLevel = option} id="selector">
                        <option disabled selected>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);

Answer 1

Вы забыли передать событие на getData.

. OnChange предоставит вам доступ к событию, но вам все равно придется передать его в вашу функцию поддержки. Это выглядит так:

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

Ваша функция handleSubmit также должна поменять их значения:

handleSubmit=(e, priorityLevel)=> {

Вы видите, что я переключил их, позвольте мне объяснить, почему.

handleSubmit будет вызван кнопкой добавления. Это приведет к тому, что форма вызовет функцию handleSubmit. Поэтому эта функция должна сначала иметь параметр события, после чего вы можете добавить все, что захотите.

Вы также должны добавить type="submit" к своей кнопке, которая вызовет действие формы.

Answer 2

В вашем дочернем компоненте PrioritySelector у вас есть обработчик щелчка handleSelect. handleSelect получает объект события в качестве аргумента при нажатии. Вы можете просто передать это событие родителям this.props.getData props

handleSelect = (event) => {
  const priorityLevel = this.getPriorityLevel.value;
  this.props.getData(priorityLevel, event);
}

Теперь handleSubmit родительского компонента будет иметь доступ к объекту события, который был передан из дочернего компонента.

handleSubmit = (priorityLevelData, e) => {
  // now has the event object e
  e.preventDefault()
  const todoTitle = this.getTodoTitle.value;
  const description = this.getDescription.value;
  const priorityLevel = priorityLevelData;
  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 = "";
}