您可以在此处查看我的应用程序:
https://moon.holdings
这是回购协议:
https://github.com/Futuratum/moon.holdings
如果选择[+]添加资产按钮,单击搜索输入并点击选项卡,则有2个问题。
-
-
更重要的是,在比特币被选中后,tabing不会选择列表中的下一个项目。相反,在4个选项卡之后,我可以看到Coinbase按钮被选中,而不是另一个li。
在这里你可以看到每个
li
是否有正确的
tabindex
:
-
第一个选项卡,未选择任何内容
-
-
-
第四个选项卡,选择Coinbase按钮:
searchModal.js组件的JSX:
render() {
const { assets } = this.state;
return (
<section id="search-modal">
<header className="search-header">
<input
id="coin-search"
type="text"
placeholder="Search"
onChange={() => this.handleChange()}
/>
<button className="close-modal-x" onClick={this.closeSquareEdit} />
</header>
<ul id="coins-list">
{ assets !== 'undefined'
? assets.map((asset, i) => (
<li
key={asset.currency}
role="button"
tabIndex={i}
onFocus={() => this.setFocus(asset)}
onBlur={this.onBlur}
onClick={() => this.handleSelect(asset)}
>
{asset.name}
<span className="symbol">{asset.currency}</span>
</li>))
: <li>Loading...</li>
}
</ul>
</section>
);
}
return (
<div id="board">
{ this.renderPortfolio(sortedAssets) }
{ edit && this.renderSquareEdit(coin) }
{ search && this.renderSearchModal() }
{ loading && moonPortfolio && <Loading /> }
{ portfolio.length === 0 && <Welcome /> }
<PlusButton toggleSearch={this.handleSearchButton} />
<Affiliates />
<Nomics />
<Astronaut logo={isTrue} />
</div>
);
renderSearch方法:
renderSearchModal() {
return (
<div>
<Search
handleClose={() => this.toggleSquareEdit(false, {})}
openEdit={this.toggleSquareEdit}
/>
<div id="overlay" onClick={this.handleSearchButton} />
</div>
);
}
最后是affiliates.js组件
const links = [
{ name: 'coinbase', link: coinbase, h4: 'Buy Bitcoin' },
{ name: 'binance', link: binance, h4: 'Buy Altcoins' },
{ name: 'changelly', link: changelly, h4: 'Swap coins' }
];
export default () => (
<div className="affiliates">
<ul>
{links.map(l => (
<a href={l.link} key={l.name} target="_blank" rel="noopener">
<li className={l.name}>
<h4>{l.h4}</h4>
</li>
</a>
))}
</ul>
</div>
);