【发布时间】：2019-01-14 08:24:23
【问题描述】：
我是 React 的新手，所以如果问题或我想要实现的事情很奇怪，我深表歉意（请告诉我是否有更好/更合乎逻辑的方法来做到这一点）。
我在我的 React 应用程序中使用 List Fabric React 组件，该组件基于此处的 ListGridExample 组件：
https://developer.microsoft.com/en-us/fabric#/components/list
我已经设置好了，但我似乎无法完成以下操作：
当单击List 组件中的span class（实际上是一个项目）时，我想将其更改为background color，为此我已按照以下帖子中的说明进行操作：
https://forum.freecodecamp.org/t/react-js-i-need-a-button-color-to-change-onclick-but-cannot-determine-how-to-properly-set-and-change-state-for-that-component/45168
这是一个相当简单的示例，但这会将我所有的grid cells / span classes 更改为蓝色，而不仅仅是单击的那个。有没有办法让点击的跨度类改变它的背景？
实现代码（省略了一些不必要的代码）：
class UrenBoekenGrid extends React.Component {
constructor(props) {
super(props);
this.state = {
bgColor: 'red'
}
}
render() {
return (
<FocusZone>
<List
items={[
{
key: '#test1',
name: 'test1',
},
{
name: 'test2',
key: '#test2',
},
{
name: 'test3',
key: '#test3',
},
{
name: 'test4',
key: '#test4',
},
..... up to 32 items
]}
onRenderCell={this._onRenderCell}
/>
</FocusZone>
);
}
changeColor(item){
this.setState({bgColor: 'blue'});
console.log('clicked item == ' + item.name)
}
_onRenderCell = (item, index) => {
return (
<div
className="ms-ListGridExample-tile"
data-is-focusable={true}
style={{
width: 100 / this._columnCount + '%',
height: this._rowHeight * 1.5,
float: 'left'
}}
>
<div className="ms-ListGridExample-sizer">
<div className="msListGridExample-padder">
{/* The span class with the click event: */}
<span className="ms-ListGridExample-label" onClick={this.changeColor.bind(this, item)} style={{backgroundColor:this.state.bgColor}}>{`item ${index}`}</span>
<span className="urenboeken-bottom"></span>
</div>
</div>
</div>
);
};
}
我现在已将click event 附加到span class 本身，但我认为将click event 放在item(s)（数组）本身上更符合逻辑，但是我找不到方法实现这一点。
----更新----
@peetya 回答似乎是要走的路，因为@Mario Santini 回答只是更新一个单元格，如果单击另一个单元格，则前一个单元格恢复正常并失去颜色。
所以我所做的是将items array 添加到state 并将bgColor 属性添加到它们：
this.state = {
items: [
{
key: '#test1',
name: 'test1',
bgColor: 'blue',
},
{
name: 'test2',
key: '#test2',
bgColor: 'blue',
},
{
name: 'test3',
key: '#test3',
bgColor: 'blue',
},
{
name: 'test4',
key: '#test4',
bgColor: 'blue',
},
],
}
现在在我的List 渲染中，我已将项目设置为state items 数组并在_onRenderCell 函数中添加了onClick 事件：
render() {
return (
<FocusZone>
<List
items={this.state.items}
getItemCountForPage={this._getItemCountForPage}
getPageHeight={this._getPageHeight}
renderedWindowsAhead={4}
onRenderCell={this._onRenderCell}
/>
</FocusZone>
);
}
_onRenderCell = (item, index) => {
return (
<div
className="ms-ListGridExample-tile"
data-is-focusable={true}
style={{
width: 100 / this._columnCount + '%',
height: this._rowHeight * 1.5,
float: 'left'
}}
>
<div className="ms-ListGridExample-sizer">
<div className="msListGridExample-padder">
<span className="ms-ListGridExample-label"
onClick={this.onClick(item.name)}
style={{backgroundColor: item.bgColor}}
>
{`item ${index}`}
</span>
<span className="urenboeken-bottom"></span>
</div>
</div>
</div>
);
};
问题是我无法在_onRenderCell 函数中添加onClick event，因为这会出现以下错误：
我想保留 Fabric List component，因为它还具有渲染/调整屏幕尺寸的功能，完全删除列表组件并用 @peetya 建议的工作替换它：
render() {
<div>
{this.state.items.map(item => (
<div onClick={() => this.onClick(item.name)} style={{backgroundColor: item.bgColor}}>
{item.name}
</div>
))}
</div>
}
但这也将删除 List 组件功能及其 responsive 函数。
所以我的最后一个想法是用整个 onClick div 替换 List 的 items 并删除 _onRenderCell 函数本身，但这会使页面空白（看不到单元格都没有了..):
render() {
return (
<FocusZone>
<List
items={this.state.items.map(item => (
<div onClick={() => this.onClick(item.name)} style={{backgroundColor: item.bgColor}}>
{item.name}
</div>
))}
getItemCountForPage={this._getItemCountForPage}
getPageHeight={this._getPageHeight}
renderedWindowsAhead={4}
// onRenderCell={this._onRenderCell}
/>
</FocusZone>
);
}
我认为也许 css ms-classes / div 也应该在那里，因为它们具有高度/宽度属性，但添加它们（就像在 _onRenderCell 函数中一样）没有任何区别，页面是还是空白。
【问题讨论】：
标签： javascript reactjs react-native fabricjs