我有一个 React 组件,它呈现 <ul>
并插入<li>
基于状态的元素。
class SimpleComponent extends React.Component {
constructor(props) {
this.state = { menu_items: [name: "First", id: 10] }
this.clickMenu = this.clickMenu.bind(this)
}
generateLinks() {
let to_return='';
for (var i=0;i<this.state.menu_items.length; i++) {
to_return = to_return + `<li><a onclick={clickMenu}> ${this.state.menu_item[i]['name']} </a></li>`
}
return to_return;
}
clickMenu(e) {
console.log(e.target)
}
render() {
return(
<ul dangerouslySetInnerHTML={this.generateLinks()}></ul>
)
}
}
当我单击 anchor 时,控制台指示 Uncaught ReferenceError:clickMenu 未定义。我尝试使用 this.clickMenu 代替,但没有任何反应。我注意到渲染的 anchor 看起来像:
<a onclick="{menuClick}">
有没有办法创建这些 anchor 元素,让 React 获取 onClick 定义,而不是将它们传递给浏览器进行解释?
最佳答案
使用 React,你应该构建组件和子组件,而不是编写长 HTML 字符串。您基本上破坏了 React 的使用模式,这正是您使用的属性包含“危险”一词的原因。
这是实现该列表的一种方法:
class SimpleComponent extends React.Component {
constructor(props) {
super(props);
this.state = { menu_items: [{ name: "First", id: 10 }] };
this.clickMenu = this.clickMenu.bind(this);
}
clickMenu(id) {
console.log(id);
}
render() {
var items = this.state.menu_items.map(item => {
let handleClick = () => {
this.clickMenu(item.id);
};
return (
<li key={item.id}>
<a onClick={handleClick}>
{item.name}
</a>
</li>
);
});
return <ul>{items}</ul>;
}
}
我正在构建一个 <li>
的数组映射元素state.menu_items
。由于当状态发生变化时组件会重新渲染,因此这将始终根据当前的state
进行更新。 (并且只进行实际必要的更改,这是 React 的定义特征之一)。
另请注意,您的构造函数缺少 super(props)
调用,并且状态数组的单个元素没有用花括号括起来。
关于javascript - 使用 React 处理的 onClick 创建 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47897158/