将语义-UI-React转换为语义-UI；事件处理程序
我试图用我在语义-UI-react代码中使用的相同功能来成功地表达语义-UI代码。任何帮助都将不胜感激。
这就是我所拥有的：
类预览扩展React.Component { componentDidMount() { const update = () => { this.dest.textContent = this.src.innerHTML.replace(/ Object.assign(this，{src })}> Object.assign(this，{dest})})}导出类Demo扩展了组件{ref=(){ => ()；this.localStorageClear.bind(this)；} localStorageClear = (e) =>{ e.preventDefault()；window.localStorage.clear()；}；render() { return ( <按钮onClick={(e) => this.localStorageClear(e)} className='clear‘content=’清除播放列表‘/>
在预览组件中编写的代码是专门用来转换在Demo组件中编写的代码的。Demo组件应转换为如下所示：
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input">
<input placeholder="Search for a song or artist..." class="js-search input-search">
<i class="search icon js-submit"></i>
</div>
<button onclick="localStorageClear();" class="clear">Clear Playlist</button>
<button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>
<div class="search-results js-search-results ui cards">
</div>
</div>
</div>
顶部代码的实际输出是：
<div id="soundcloud-player">
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input input-search">
<input placeholder="Search for a song or artist..." type="text">
<i aria-hidden="true" class="search icon">
</i>
</div>
<i aria-hidden="true" class="icon js-submit">
</i>
<button class="ui button clear" role="button">Clear Playlist
</button>
<button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
</button>
<div class="ui card js-search-results search-results">
</div>
</div>
</div>
</div>
</div>我试图弄清楚为什么localStorageClear函数没有显示实际输出中的第一个按钮。我在Demo组件中语义-UI-React代码的顶部做错了什么吗？
回答 1
Stack Overflow用户
发布于 2018-08-08 05:38:59
您设置处理程序函数的方式不正确。您还可以在构造函数中进行绑定，并在按钮的onClick事件内内联箭头函数。你只需要在一个地方绑定。
看一看我制作的codesandbox示例，这样您就可以看到如何声明一个类方法处理函数并将其与click事件一起使用。注意，这里没有构造函数或绑定到onClick事件的箭头函数？这是因为绑定发生在类方法上。handleClick = () => {}
class App extends React.Component {
handleClick = e => {
console.log(e.target + " was clicked.");
// Do whatever functionality you need here.
// In your example you do not show that it matters what the element is,
// so you don't need to pass the event (e) into your class method.
};
render() {
return (
<Container>
<Divider hidden />
<Button content="Click Me" onClick={this.handleClick} />
<Divider hidden clearing />
<Message info>
Look in your console and you will see that the click function is
working.
</Message>
</Container>
);
}
}https://stackoverflow.com/questions/51733358
复制相似问题