| Name | Type | Default |
|---|
|
count
|
Number
|
5
|
Sets or gets the count property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} count={8}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} disabled={true}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
height
|
Number
|
auto
|
Sets or gets the height property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
itemHeight
|
Number
|
auto
|
Sets or gets the itemHeight property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} itemHeight={30}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
itemWidth
|
Number
|
auto
|
Sets or gets the itemWidth property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} itemWidth={20}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
precision
|
Number
|
1
|
Sets or gets the precision property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} precision={0.5}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
singleVote
|
Boolean
|
false
|
Sets or gets the singleVote property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} singleVote={true}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
value
|
Number
|
0
|
Sets or gets the value property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35} value={3}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
width
|
Number
|
auto
|
Sets or gets the width property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
|
change
|
Event
|
|
The change event is triggered when the rating is changed.
Code examples
Bind to the change event of jqxRating.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
this.refs.myRating.on('change', (event) => {
// Do Something...
});
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
| Name | Return Type |
|---|
|
disable
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
this.refs.myRating.disable();
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
enable
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
this.refs.myRating.enable();
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
getValue
|
Number
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myRating.getValue();
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
setValue
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
this.refs.myRating.setValue(20);
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
val
|
Number
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myRating.val();
}
render() {
return (
<JqxRating ref='myRating'
width={350} height={35}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|