Элемент onclick в innerHtml с помощью реакции
В компоненте я вызываю функцию для реализации этого действия: .....
{
.....
.....
const functionExam = () => {}
functionExam = function(){}
.......
......
node.innerHtml = `<div onclick = "functionExam">AAAAAAAAAA</div>`;
....
....
}
}
functionExam = () => {}
render(){.....
......
Итак, я хочу, чтобы при нажатии на AAAAAA он вызывал fuctionExam, но с ошибкой:
-----Uncaught TypeError: functionExam is not a function
at HTMLSpanElement.functionExam
------functionExam is not a function
------functionExam is not defined...
...., i tried every way but it still didn'd, please help me.Thank you so much.
Ответы 2
Это потому, что ваш functionExam находится в вашем файле, а не в глобальной (оконной) области. Прежде всего, вы не должны использовать innerHTML при использовании React. Создайте компонент React, а затем слушайте от него события.
function MyDiv() {
return (<div onClick = {functionExam}>AAAAAAAAAA</div>);
}
function functionExam () {
// things happen
}
Поскольку есть два типа компонентов в реакции, такие как функциональный и классовый компонент. 1. Функциональный компонент, затем следуйте приведенному ниже коду.
function ActionComponent() {
function functionExam() {
console.info('The inner html was clicked.');
}
return (
<div onClick = {handleClick}>AAAAAAAAA</div>
);
}
2. Компоненты класса следующие.
class ActionComponent extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.functionExam = this.functionExam.bind(this);
}
functionExam() {
console.info('The inner html was clicked.');
}
render() {
return (
<div onClick = {this.functionExam}>AAAAAAAAA</div>
);
}
}
Если вызов bind вас раздражает, есть два способа избавиться от этого, используя стрелочная функция.
class ActionComponent extends React.Component {
// This syntax ensures `this` is bound within functionExam.
functionExam = () => {
console.info('The inner html was clicked.');
}
render() {
return (
<div onClick = {this.functionExam}>AAAAAAAAA</div>
);
}
}
Другой способ использования стрелочная функция заключается в следующем:
class ActionComponent extends React.Component {
functionExam() {
console.info('The inner html was clicked.');
}
render() {
return (
<div onClick = {()=>this.functionExam}>AAAAAAAAA</div>
);
}
}
Примечание :
- Вы можете поместить любое допустимое выражение JavaScript в кудрявый подтяжки в JSX
- React использует случай верблюда. Поэтому используйте по щелчку вместо onclick.
- Не используйте innerHTML в реакции.
Попробуйте сделать functionExam внутри компонента (т.е. компонента функции или класса) или на родительском уровне, который может иметь доступ через props.
Пожалуйста, дайте мне знать, насколько я понимаю ваш вопрос.
Здравствуйте, не совсем прямой ответ, но рекомендация. React рекомендует не взаимодействовать с dom напрямую через innerHTML. Если вам нужно установить какой-то внутренний html, вы можете использовать опасно установить внутренний html на его место