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

Question

这里是代码

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!!!”在控制台打印出来，防止默认事件同时发生。

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

是否可以将 onSubmit 事件中的参数传递给附加到该事件的函数？

Answer 1

你可以对函数进行柯里化

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

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

等效的 ES5 代码

handleSubmit: function(text) {
  return function(event) {
    event.preventDefault()
    console.log(text)
  }.bind(this)
}

---

您的代码很奇怪，因为您混合了 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

---

或者更好，因为你的组件不使用任何状态，你可以使用Stateless Functional Component

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

Answer 2

是的，但你不应该这样做。您当前所做的是说“将 onSubmit 处理程序设置为调用 this.handleSubmit('react!!!') 的结果”。相反，可行的是去：

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

这当然只是简单的说法：

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

然而，虽然这会起作用，但它所做的是在每次调用 render 时定义一个新的匿名函数。 Render 可以经常被调用，所以这最终会导致一堆新函数一直被创建，这可能会导致性能问题，因为它们需要被垃圾收集和清理。

更好的是拥有一个能够自行查找所需数据的功能。我有两种不同的方法来解决这个问题：

• 要么把相关数据存储在props中，这样就可以从this.props拉出来了

• 或者，将相关数据存储在 DOM 中（使用 HTML 5 data attributes），然后使用 javascript 将它们拉出。由于您在被调用的事件处理程序中获得了事件目标，因此您可以使用它来提取您存储的任何数据属性。例如，您可以像这样声明您的表单：

  <form data-somefield={something.interesting} onSubmit={this.handleSubmit}>

您可以通过以下方式在 handleSubmit 中访问：

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

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

因此，最好只在组件的 props 中包含您想要的数据，然后在事件处理程序中将其拉出。