在react js中添加属性时，是否可以使用jquery样式

Question

我有一个从api中提取的html表单作为字符串，我需要在上面添加onSubmit事件，就像在jquery样式中一样，这可能吗？如何做到？

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
class MyForm extends React.Component {
const htmlForm = "<form><input type='email' name='user[email]' /></form>"; // this taken from API server as string
const reactForm = ReactHtmlParser(htmlForm);
// i want to do like this
reactForm.on('submit', (e) => {
e.preventDefault();
console.log('submitted')
})
}

但它不起作用，有什么想法吗？

纯javascript中的另一个想法，但还不起作用。将纯html+javascript转换为react组件时存在问题。我还不知道转换它的最佳库是什么。

import React from 'react';
import axios from 'axios';
import ReactHtmlParser from 'react-html-parser';
class NewChatButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick = (e) => {
e.preventDefault();
this.props.newChatButtonCallback({modal: {body: 'loading...'}});
axios.get('/users/rooms/new.json')
.then(response => {
const reactForm = ReactHtmlParser(response.data);
const html = new DOMParser().parseFromString(response.data, 'text/html').body;
const form = html.querySelector('form');
const select = form.querySelector('select');
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log('submitted');
});
select.addEventListener('change', (e) => {
e.preventDefault();
console.log('changed')
})
this.props.newChatButtonCallback({
modal: {
title: 'Cari Tutor',
body: reactForm
}
});
}).catch(error => console.log(error));
}
render () {
return (
<React.Fragment>
<button onClick={this.handleClick} className="btn btn-link" data-toggle="modal" data-target="#mainModal">
<i className="material-icons">add</i>
</button>
</React.Fragment>
)
}
}
export default NewChatButton;

Answer 1

您可以从react-html-parser:使用transform

transform = (node, index) => {
if (node.type === 'tag' && node.name === 'form') {
return (
<form
key={index}
{...node.attribs}
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
console.debug('submitted')
}}
>
{node.children.map((child, i) => {
return <child.name key={i} {...child.attribs}></child.name>
})}
<button type="submit">Submit</button>
</form>
)
}
}

以下是如何render:

render() {
const htmlForm = "<form><input type='email' name='user[email]' /></form>"
const reactForm = ReactHtmlParser(htmlForm, { transform: this.transform })
return (
<>
<div>{reactForm}</div>
</>
)
}

此外，在大多数浏览器上，在单个文本输入表单中不需要提交按钮，只需按字段中的Enter即可提交。但最好有一个按钮。T.J.Crowder的评论

我添加了Submit按钮。如果你不想显示它，你可以用CSS隐藏它。

CodeSandbox 上的实时副本