feat(SelectRender.js): 增加键值对参数能在浏览态的时候显示key值

demo/demolist/Demo14.js

@@ -28,7 +28,20 @@ const format3 = "YYYY-MM-DD HH:mm:ss";
 
 const dateInputPlaceholder = "选择日期";
 const dateInputPlaceholder2 = "选择年月";
-
+const dataSource = [
+  {
+    key: "boyuzhou",
+    value: "jack"
+  },
+  {
+    key: "renhualiu",
+    value: "lucy"
+  },
+  {
+    key: "yuzhao",
+    value: "yiminghe"
+  }
+];
 class Demo14 extends React.Component {
   constructor(props) {
     super(props);
@@ -39,9 +52,9 @@ class Demo14 extends React.Component {
           name: "沉鱼",
           number: "10",
           age: "y",
-          address: "111",
+          address: "jack",
           datepicker: "2017-06-12",
-          MonthPicker: "2017-02",
+          MonthPicker: "2017-02"
         },
         {
           key: "1",
@@ -50,7 +63,7 @@ class Demo14 extends React.Component {
           age: "y",
           address: "lucy",
           datepicker: "2017-06-12",
-          MonthPicker: "2017-02",
+          MonthPicker: "2017-02"
         },
         {
           key: "2",
@@ -59,7 +72,7 @@ class Demo14 extends React.Component {
           age: "n",
           address: "lucy",
           datepicker: "2017-06-12",
-          MonthPicker: "2017-02",
+          MonthPicker: "2017-02"
         },
         {
           key: "3",
@@ -68,7 +81,7 @@ class Demo14 extends React.Component {
           age: "y",
           address: "lucy",
           datepicker: "2017-06-12",
-          MonthPicker: "2017-02",
+          MonthPicker: "2017-02"
         }
       ],
       count: 4
@@ -105,7 +118,7 @@ class Demo14 extends React.Component {
         width: "150px",
         render: (text, record, index) => (
           <InputRender
-            format='Currency'
+            format="Currency"
             name="name"
             placeholder="请输入姓名"
             value={text}
@@ -142,9 +155,10 @@ class Demo14 extends React.Component {
         render: (text, record, index) => {
           return (
             <SelectRender
+              dataSource={dataSource}
               isclickTrigger={true}
               value={text}
-              onChange={this.onSelectChange}
+              onChange={this.onSelectChange(index, "address")}
             >
               <Option value="jack">boyuzhou</Option>
               <Option value="lucy">renhualiu</Option>
@@ -194,10 +208,10 @@ class Demo14 extends React.Component {
       }
     ];
   }
-  check=(flag, obj)=>{
+  check = (flag, obj) => {
     console.log(flag);
     console.log(obj);
-  }
+  };
 
   onInputChange = (index, key) => {
     return value => {
@@ -213,8 +227,13 @@ class Demo14 extends React.Component {
       this.setState({ dataSource });
     };
   };
-  onSelectChange = value => {
-    console.log(`selected ${value}`);
+  onSelectChange = (index, key) => {
+    return value => {
+      console.log(`selected ${value}`);
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
   };
   onDateChange = d => {
     console.log(d);
@@ -256,6 +275,9 @@ class Demo14 extends React.Component {
       </Animate>
     );
   };
+  getData = () => {
+    console.log(this.state.dataSource);
+  };
   render() {
     const { dataSource } = this.state;
     const columns = this.columns;
@@ -268,6 +290,13 @@ class Demo14 extends React.Component {
         >
           添加
         </Button>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.getData}
+        >
+          取数
+        </Button>
         <Table
           bordered
           data={dataSource}

docs/rendertype.md

@@ -65,8 +65,11 @@ import InputRender from "bee-table/render/InputRender.js"
 2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
 
 #### 配置
-| 参数                | 说明                                       | 类型         | 默认值    |
-| ----------------- | ---------------------------------------- | ---------- | ------ |
-| isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false  |
+| 参数             | 说明                                       | 类型      | 默认值   |
+| -------------- | ---------------------------------------- | ------- | ----- |
+| isclickTrigger | 是否使用点击触发编辑状态                             | boolean | false |
+| dataSource     | 数据的键值对，在渲染的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array   | -     |
+
+
 
 注:其他参数参见bee-select组件参数配置

src/render/SelectRender.js

@@ -1,7 +1,11 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import Icon from "bee-icon";
 import Select from "bee-select";
 
+const propTypes = {
+  dataSource: PropTypes.array
+};
 export default class SelectRender extends Component {
   state = {
     value: this.props.value,
@@ -13,7 +17,7 @@ export default class SelectRender extends Component {
       this.props.onChange(value);
     }
     this.setState({ value: value });
-    setTimeout(()=> {
+    setTimeout(() => {
       this.setState({ editable: false });
     }, 0);
   };
@@ -27,8 +31,8 @@ export default class SelectRender extends Component {
     this.setState({ editable: true });
   };
   render() {
-    const { value, editable } = this.state;
-    let { isclickTrigger } = this.props;
+    let { value, editable } = this.state;
+    let { isclickTrigger, dataSource } = this.props;
     let cellContent = "";
     if (editable) {
       cellContent = isclickTrigger ? (
@@ -63,6 +67,15 @@ export default class SelectRender extends Component {
         </div>
       );
     } else {
+      if (dataSource && dataSource.length > 0) {
+        for (var index = 0; index < dataSource.length; index++) {
+          var element = dataSource[index];
+          if (element.value === value) {
+            value = element.key;
+            break;
+          }
+        }
+      }
       cellContent = isclickTrigger ? (
         <div className="editable-cell-text-wrapper" onClick={this.edit}>
           {value || " "}
@@ -81,3 +94,4 @@ export default class SelectRender extends Component {
     return <div className="editable-cell">{cellContent}</div>;
   }
 }
+SelectRender.propTypes = propTypes;