Javascript 如何在ReactJS onSubmit函数调用中传入第二个参数

这是密码

import React from "react";

var newForm = React.createClass({
    handleSubmit: function (e, text) {
        e.preventDefault();
        console.log(text);
    },
    render: function () {
        return (
            <form onSubmit={this.handleSubmit("react!!!")}>
                <input type="text"/>
            </form>
        );
    }
)};

module.exports = newForm;

从“React”导入React；
var newForm=React.createClass({
handleSubmit:函数（e，文本）{
e、 预防默认值（）；
console.log（文本）；
},
渲染：函数（）{
返回(
);
}
)};
module.exports=newForm；

我想要实现的是，当我提交表单时，我希望在控制台中打印字符串“react！！！”并防止同时发生默认事件

显然，将参数传递给“handleSubmit”函数会破坏代码

---

是否要将onSubmit事件中的参数传递给附加到此事件的函数？

您可以使用curry函数

handleSubmit: text => event => {
  event.preventDefault()
  console.log(text)
}

<form onSubmit={this.handleSubmit('react!!!')}>
  ...

---

但是，您的代码很奇怪，因为您混合了ES6和ES5样式。如果您使用的是ES6导入，那么您最好在代码的其余部分使用ES6

import {Component} from 'react'

class NewForm extends Component {
  handleSubmit (text) {
    return event => {
      event.preventDefault()
      console.log(text)
    }
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit('react!!!')}>
        <input type="text">
      </form>
    }
  }
}

export default NewForm

从'react'导入{Component}
类NewForm扩展组件{
handleSubmit（文本）{
返回事件=>{
event.preventDefault（）
console.log（文本）
}
}
render（）{
返回(
}
}
}
导出默认新表单

---

或者更好，因为组件不使用任何状态，所以可以使用

从'react'导入{Component}
const handleSubmit=text=>event=>{
event.preventDefault（）
console.log（文本）
}
const NewForm=props=>(
)
导出默认新表单

是的，但您不应该这样做。您当前正在执行的操作是“将onSubmit处理程序设置为调用this.handleSubmit（'react！！！'）的结果”。相反，有效的方法是：

<form onSubmit={e => this.handleSubmit(e, "react!!!")}>

需要注意的是，a）像这样在DOM中存储数据感觉不太习惯，b）如果将其用于带有嵌套元素的onClick事件，您可能会发现您必须爬升DOM层次结构以查找数据存储的位置。例如，如果您有一个带有数据属性和onClick的div，但它包含一个span和一个image，那么当您单击该image时，onClick处理程序可能会将其视为目标元素，这意味着您必须转到父级以查找带有您要查找的数据属性的div

---

因此，最好只在组件的道具中包含所需的数据，然后将其从事件处理程序中取出。

onSubmit={event=>this.handleSubmit（event，“react！！！”）}

没有任何情况，如果您的

render

方法应该知道

handleSubmit

不是的东西，它可能是一个prop，或者是一个state，或者是一个常量define。如果没有，您会有一些代码味道…这很聪明，但遇到了与我在回答中概述的相同的问题，即您正在每个渲染上创建一个新函数，这对于垃圾收集打击来说并不理想。John，如果我错了，请纠正我，但是元素不会被渲染，除非它们的某些部分发生更改。无论如何，这都是过早的优化。除非这种形式处于一个高容量循环的中间，否则不会有什么区别。嗯，当他们或他们的任何父母被重新渲染时，元素会被重新渲染，这是由于状态或道具的改变而发生的。重新呈现可能会频繁发生，尤其是在键盘事件（取决于事物的结构）导致的表单中。当然，onSubmit是一个可能不会经常调用的事件，但事件处理程序是经常使用的，我认为值得一提的是，在呈现方法中放置任何类型的匿名函数都是低效的；避免在render中创建新函数是一种很好的做法；但是，如果您了解到这是解决此问题的主要方法，然后将其应用于另一种情况（例如，在一个表中，您可以过滤数百个单元格），那么效率低下的情况会突然增加。与开发一样，这是一个权衡问题。我只是想强调解决这个问题的各种方法的优缺点。我认为后一个答案中的建议过于偏激，无法避免使用简单的函数；任何好的javascript程序的基本构建块。请记住使用您的探查器，并且仅当性能是一个经验证的问题时才进行非惯用的更改。出于我解释的原因，我同意第二个建议是不太理想的解决方案。我记得我曾经尝试过，例如，当我有一个

标签和一堆

的

时，我希望有一个onClick事件，该事件也会传递它们的ID来执行操作。最后，对于我概述的警告来说，这是一件痛苦的事情，所以在未来，我可能会创建一个新的组件，这样我就可以通过道具传递我需要的相关信息。这完全不同于tho。在这种情况下，您应该在

上单击一个

处理程序，然后使用
event.srcmelement
引用单击的
，最终我让它工作得很好，与简单地创建一个新组件作为道具传递ID相比，这要麻烦得多。这并不是完全不同，因为我们仍然在谈论能够将附加信息与事件一起传递给它的事件处理程序。我想是苹果和桔子吧。我给你做了一把小提琴来证明我在说什么。即使许多孩子在活动中采取行动，他们也不需要独立的听众。下面是一个要演示的JSFIDLE：
import {Component} from 'react'

const handleSubmit = text=> event=> {
  event.preventDefault()
  console.log(text)
}

const NewForm = props=> (
  <form onSubmit={handleSubmit('react!!!')}>
    <input type="text">
  </form>
)

export default NewForm

<form onSubmit={e => this.handleSubmit(e, "react!!!")}>

<form onSubmit={function(e) { this.handleSubmit(e, "react!!!"); }}>

handleSubmit: function(e) {
    console.log(e.target.dataset.somefield);
}