描述

docs/index.md

@@ -14,4 +14,3 @@ hero:
 
 | 组件 | 下载量 | 版本 |
 | ---- | ------ | ---- |
-

packages/chengkaiwen_test/src/demos/Simple.js

@@ -2,21 +2,61 @@ import React from 'react';
 import { Typography, Divider } from 'antd';
 import './a.css';
 const data = [
-  '光谷智慧园一期泵房1',
-  '光谷智慧园一期泵房2',
-  '光谷智慧园一期泵房3',
-  '光谷金融港一期水厂4',
-  '光谷金融港二期水厂5',
+  '列表数据第1行',
+  '列表数据第2行',
+  '列表数据第3行',
+  '列表数据第4行',
+  '列表数据第5行',
 ];
 const color = ['red', 'green', 'olive', 'blue', 'purple'];
-export default () => {
+/*export default () => {
+
+  function dianji(i,e){
+    alert(`您点击了第${i+1}行`)
+    color[i]='black'
+    console.log(color );
+   
+  }
   return (
     <>
       {data.map((v, i) => (
-        <div className={data[i]} title={'程恺文' + i} style={{ color: color[i] }}>
+        <div className={data[i]} onClick={dianji.bind(this,i)} title={'程恺文' + i} style={{ color: color[i] }}>
           {i + v + '程恺文'}
         </div>
       ))}
     </>
   );
-};
+};     */
+
+class B extends React.Component {
+  constructor(props) {
+     super(props);
+     this.state = {data: [
+      '列表数据第1行',
+      '列表数据第2行',
+      '列表数据第3行',
+      '列表数据第4行',
+      '列表数据第5行',
+    ],color:['red', 'green', 'olive', 'blue', 'purple'],
+    color1:['red', 'green', 'olive', 'blue', 'purple']}
+  }
+ dianji=(i,e)=>{
+    alert(`您点击了第${i+1}行`)
+    if(this.state.color[i]=='black'){
+      this.state.color[i]=this.state.color1[i]
+    }else{
+    this.state.color[i]='black'}
+  //  console.log(this.state.color );
+    this.setState({color: this.state.color})
+  }
+  render() {
+     return (
+       <div> {this.state.data.map((v, i) => (
+        <div className={this.state.data[i]} onClick={this.dianji.bind(this,i)} title={'程恺文' + i} style={{ color: this.state.color[i] }}>
+          {i + v + '程恺文'}
+        </div>
+      ))}</div>
+    )
+  }
+}
+export default B;
\ No newline at end of file