时间戳

首页 > 解决方案 > 当自定义参数从子组件获取数据时，如何在 React 中除了您自己的自定义参数之外传递事件参数

javascript - 当自定义参数从子组件获取数据时，如何在 React 中除了您自己的自定义参数之外传递事件参数

问题描述

我在 React 中编程并在父（TodoForm.js）和子（PrioritySelector.js）组件之间传递数据。在这种情况下，我想从子组件获取数据，因此我将自定义参数传递给函数“handleSubmit”，然后将该函数作为 prop(getData={this.handleSubmit}) 传递给子组件。现在，我可以从子组件中检索数据，但是，当我想为 e.preventDefault 参数传递一个“e”参数时，它会给我一个错误。比如TypeError:e is not a function。有谁知道我可以在同一方法中传递这两个参数（自定义参数和事件参数）的方法？非常感谢。我的代码如下。谢谢！

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

标签： javascriptreactjsdatabasereact-nativeecmascript-6

解决方案

您忘记将事件传递给getData.

onChange 将使您可以访问该事件，但您仍然必须将其传递给您的 prop 函数。它看起来像这样：

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

您的handleSubmit函数也应该交换它们的值：

handleSubmit=(e, priorityLevel)=> {

你看我把它们调换了，让我解释一下原因。

handleSubmit将由添加按钮触发。这也将导致表单触发该handleSubmit功能。因此，该函数应该首先具有事件参数，然后您可以添加任何您想要的。

您还应该添加type="submit"到您的按钮，这将触发表单操作。

推荐阅读