Skip to content
Permalink
Browse files

fix(bee-checkbox): 全键盘操作bug

  • Loading branch information...
liushaozhen committed Nov 30, 2018
1 parent 07e78e4 commit 0c178b87222d861753244c2127860101a0372499
Showing with 55 additions and 7 deletions.
  1. +16 −0 build/RadioGroup.js
  2. +1 −1 demo/demolist/Demo1.js
  3. +1 −1 demo/index.js
  4. +18 −2 dist/demo.js
  5. +1 −1 dist/demo.js.map
  6. +1 −1 package.json
  7. +17 −1 src/RadioGroup.js
@@ -88,6 +88,22 @@ var RadioGroup = function (_React$Component) {
}
};

RadioGroup.prototype.componentWillReceiveProps = function componentWillReceiveProps() {
var array = [];
this.props.children.map(function (item) {
array.push(item.props.value);
});
if (array.indexOf(this.props.selectedValue) == -1) {
this.setState({
focusvalue: array[0]
});
} else {
this.setState({
focusvalue: ''
});
}
};

/**
* 一旦外层change方法触发本身props发生改变,则调用getChildContext更新与子Radio的通信信息(radioGroup)
*/
@@ -12,7 +12,7 @@ class Demo1 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'we'
selectedValue: '1'
};
}
handleChange(value) {
@@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
const CARETUP = <i className="uf uf-arrow-up"></i>;


var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description 基本用法 \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'we'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"lol\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio value=\"ig\" >IG</Radio>\n <Radio value=\"edg\" >EDG</Radio>\n <Radio value=\"rng\" >RNG</Radio>\n <Radio value=\"we\" >WE</Radio>\n <Radio value=\"skt\" >SKT</Radio>\n <Radio value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 基本用法 "},{"example":<Demo2 />,"title":" 不同颜色的radio","code":"/**\n * @title 不同颜色的radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'rng'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"color\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio colors=\"primary\" value=\"ig\" >IG</Radio>\n <Radio colors=\"success\" value=\"edg\" >EDG</Radio>\n <Radio colors=\"info\" value=\"rng\" >RNG</Radio>\n <Radio colors=\"warning\" value=\"we\" >WE</Radio>\n <Radio colors=\"danger\" value=\"skt\" >SKT</Radio>\n <Radio colors=\"dark\" value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"team\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio style={radioStyle} value=\"ig\" >IG</Radio>\n <Radio style={radioStyle} value=\"edg\" >EDG</Radio>\n <Radio style={radioStyle} value=\"rng\" >RNG</Radio>\n <Radio style={radioStyle} value=\"we\" >WE</Radio>\n <Radio style={radioStyle} value=\"skt\" >SKT</Radio>\n <Radio style={radioStyle} value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo4 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo4 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" "}]
var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description 基本用法 \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: '1'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"lol\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio value=\"ig\" >IG</Radio>\n <Radio value=\"edg\" >EDG</Radio>\n <Radio value=\"rng\" >RNG</Radio>\n <Radio value=\"we\" >WE</Radio>\n <Radio value=\"skt\" >SKT</Radio>\n <Radio value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 基本用法 "},{"example":<Demo2 />,"title":" 不同颜色的radio","code":"/**\n * @title 不同颜色的radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'rng'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"color\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio colors=\"primary\" value=\"ig\" >IG</Radio>\n <Radio colors=\"success\" value=\"edg\" >EDG</Radio>\n <Radio colors=\"info\" value=\"rng\" >RNG</Radio>\n <Radio colors=\"warning\" value=\"we\" >WE</Radio>\n <Radio colors=\"danger\" value=\"skt\" >SKT</Radio>\n <Radio colors=\"dark\" value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"team\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio style={radioStyle} value=\"ig\" >IG</Radio>\n <Radio style={radioStyle} value=\"edg\" >EDG</Radio>\n <Radio style={radioStyle} value=\"rng\" >RNG</Radio>\n <Radio style={radioStyle} value=\"we\" >WE</Radio>\n <Radio style={radioStyle} value=\"skt\" >SKT</Radio>\n <Radio style={radioStyle} value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo4 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo4 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" "}]


class Demo extends Component {

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

@@ -1,6 +1,6 @@
{
"name": "bee-radio",
"version": "1.0.6",
"version": "1.0.7",
"description": "radio ui component for react",
"keywords": [
"react",
@@ -63,7 +63,23 @@ class RadioGroup extends React.Component {
})
}
}


componentWillReceiveProps(){
let array = []
this.props.children.map((item)=>{
array.push(item.props.value)
})
if(array.indexOf(this.props.selectedValue)==-1){
this.setState({
focusvalue:array[0]
})
}else{
this.setState({
focusvalue:''
})
}
}

/**
* 一旦外层change方法触发本身props发生改变,则调用getChildContext更新与子Radio的通信信息(radioGroup)
*/

0 comments on commit 0c178b8

Please sign in to comment.
You can’t perform that action at this time.