提交 3884ee3c 编写于 作者: A afc163

rewrite Select demos to es6 component, #4878

上级 c440a4d2
...@@ -22,13 +22,11 @@ Using the [AutoComplete](/components/auto-complete/) component is strongly recom ...@@ -22,13 +22,11 @@ Using the [AutoComplete](/components/auto-complete/) component is strongly recom
import { Select } from 'antd'; import { Select } from 'antd';
const Option = Select.Option; const Option = Select.Option;
const Test = React.createClass({ class App extends React.Component {
getInitialState() { state = {
return { options: [],
options: [], }
}; handleChange = (value) => {
},
handleChange(value) {
let options; let options;
if (!value || value.indexOf('@') >= 0) { if (!value || value.indexOf('@') >= 0) {
options = []; options = [];
...@@ -39,7 +37,7 @@ const Test = React.createClass({ ...@@ -39,7 +37,7 @@ const Test = React.createClass({
}); });
} }
this.setState({ options }); this.setState({ options });
}, }
render() { render() {
// filterOption needs to be false,as the value is dynamically generated // filterOption needs to be false,as the value is dynamically generated
return ( return (
...@@ -52,8 +50,8 @@ const Test = React.createClass({ ...@@ -52,8 +50,8 @@ const Test = React.createClass({
{this.state.options} {this.state.options}
</Select> </Select>
); );
}, }
}); }
ReactDOM.render(<Test />, mountNode); ReactDOM.render(<App />, mountNode);
```` ````
--- ---
order: 6 order: 6
title: title:
zh-CN: 联动 zh-CN: 联动
en-US: coordinate en-US: coordinate
--- ---
...@@ -28,24 +28,22 @@ const cityData = { ...@@ -28,24 +28,22 @@ const cityData = {
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'], Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
}; };
const App = React.createClass({ class App extends React.Component {
getInitialState() { state = {
return { cities: cityData[provinceData[0]],
cities: cityData[provinceData[0]], secondCity: cityData[provinceData[0]][0],
secondCity: cityData[provinceData[0]][0], }
}; handleProvinceChange = (value) => {
},
handleProvinceChange(value) {
this.setState({ this.setState({
cities: cityData[value], cities: cityData[value],
secondCity: cityData[value][0], secondCity: cityData[value][0],
}); });
}, }
onSecondCityChange(value) { onSecondCityChange = (value) => {
this.setState({ this.setState({
secondCity: value, secondCity: value,
}); });
}, }
render() { render() {
const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>); const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);
const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>); const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);
...@@ -59,7 +57,8 @@ const App = React.createClass({ ...@@ -59,7 +57,8 @@ const App = React.createClass({
</Select> </Select>
</div> </div>
); );
}, }
}); }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```` ````
...@@ -54,17 +54,15 @@ function fetch(value, callback) { ...@@ -54,17 +54,15 @@ function fetch(value, callback) {
timeout = setTimeout(fake, 300); timeout = setTimeout(fake, 300);
} }
const SearchInput = React.createClass({ class SearchInput extends React.Component {
getInitialState() { state = {
return { data: [],
data: [], value: '',
value: '', }
}; handleChange = (value) => {
},
handleChange(value) {
this.setState({ value }); this.setState({ value });
fetch(value, data => this.setState({ data })); fetch(value, data => this.setState({ data }));
}, }
render() { render() {
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>); const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return ( return (
...@@ -82,8 +80,8 @@ const SearchInput = React.createClass({ ...@@ -82,8 +80,8 @@ const SearchInput = React.createClass({
{options} {options}
</Select> </Select>
); );
}, }
}); }
ReactDOM.render( ReactDOM.render(
<SearchInput placeholder="input search text" style={{ width: 200 }} /> <SearchInput placeholder="input search text" style={{ width: 200 }} />
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册