源代码
import React from 'react';
import { ComboBox, RadioButton, Label } from 'rc-easyui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
palign: "left",
data: this.getData()
}
}
getData() {
return [
{ value: 11, text: "Mr. Nice" },
{ value: 12, text: "Narco" },
{ value: 13, text: "Bombasto" },
{ value: 14, text: "Celeritas" },
{ value: 15, text: "Magneta" },
{ value: 16, text: "RubberMan" },
{ value: 17, text: "Dynama" },
{ value: 18, text: "Dr IQ" },
{ value: 19, text: "Magma" },
{ value: 20, text: "Tornado" }
];
}
handleChange(align, checked) {
if (checked) {
this.setState({ palign: align })
}
}
render() {
return (
<div>
<h2>Panel Align</h2>
<div style={{ margin: '0 40px 10px 40px' }}>
<RadioButton
inputId="r1"
value="left"
groupValue={this.state.palign}
onChange={(checked) => this.handleChange('left', checked)}
/>
<Label htmlFor="r1" style={{ marginLeft: 10 }}>Left</Label>
</div>
<div style={{ margin: '0 40px 10px 40px' }}>
<RadioButton
inputId="r2"
value="right"
groupValue={this.state.palign}
onChange={(checked) => this.handleChange('right', checked)}
/>
<Label htmlFor="r2" style={{ marginLeft: 10 }}>Right</Label>
</div>
<Label htmlFor="c1" align="top">Select a value:</Label>
<ComboBox
style={{ width: 200 }}
inputId="c1"
data={this.state.data}
editable={false}
panelAlign={this.state.palign}
panelStyle={{ width: 220 }}
/>
</div>
);
}
}
export default App;