在 React.createElement 中将 `onSubmit` 作为道具传递

Question

I have the following code:

data = React.createElement(f, {onsubmit: a}, div.fields.map((d, i) => {
  let thisInput
  if (d.placeholder) {thisInput = React.createElement(d.format, {placeholder: d.placeholder, className: "captureEmail"})}
  if (d.value) {thisInput = React.createElement(d.format, {className: "btn"}, d.value)}
  return thisInput
}))

Particularly, I'm looking at {onsubmit: a} in the first line. I can pass className if I'd like but the onsubmit or onclick won't end up in the HTML. Is that a limitation in React?

Answer 1

In React, event names are camel cased. The compiler will covert it back to all lower case when constructing the compiled vanilla JS. To make it work, pass it the onsubmit event handler as onSubmit and the onclick event handler as onClick.

data = React.createElement(f, {onSubmit: a}, div.fields.map((d, i) => {
  let thisInput
  if (d.placeholder) {thisInput = React.createElement(d.format, {placeholder: d.placeholder, className: "captureEmail"})}
  if (d.value) {thisInput = React.createElement(d.format, {className: "btn", value: d.value})}
  return thisInput
}))