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

Question

我在React中编程，并在父组件(TodoForm.js(和子组件(PrioritySelector.js(之间传递数据。在这种情况下，我想从子组件获取数据，所以我将自定义参数传递给函数"handleSubmit"，并将该函数作为道具传递给子组件(getData={this.handleSubmit}(。现在，我可以从子组件检索数据，但当我想为e.preventDefault参数传递"e"参数时，它会给我一个错误。例如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 = "";
}