jQuery UI Widgets › Forums › React › Load new data to dropdownlist when button click
Tagged: DropDownList, react, setstate, source
This topic contains 5 replies, has 2 voices, and was last updated by soojung 6 years, 8 months ago.
-
Author
-
Hello, I’m using react-jqxDropDownList.
I successfully get changed data by setState. I can write that data on textbox but dropdownlist doesn’t change inside data. How can I change data to dropdownlist when click button?// App.js import JqxDropDownList from '../jqwidgets-react/react_jqxdropdownlist.js'; class App extends React.Component { constructor(props) { super(props); this.state = { record: ["123", "345"] }; this.handleGetEmpName = this.handleGetEmpName.bind(this); } handleGetEmpName(){ return this.props.getInfoRequest().then( () => { this.setState({ record: ["444", "555"] }); } } ); } render(){ var dataAdapter = new $.jqx.dataAdapter(this.state.record); return ( <div> <JqxDropDownList id="123" ref="myDropDownList" width={200} height={50} source={dataAdapter} /> <p>{this.state.record}</p> <button type="button" onClick={this.handleGetEmpName}>Load Data</button> </div> ); } }
Hi there soojung,
The way you are trying to update your JqxDropDownList would work if your JqxDropDownList were a React component. Try this approach:import JqxDropDownList from '../jqwidgets-react/react_jqxdropdownlist.js'; class App extends React.Component { constructor(props) { super(props); this.state = { record: ["123", "345"] }; this.handleGetEmpName = this.handleGetEmpName.bind(this); } componentDidUpdate (prevProps, prevtState) { if (prevState.record !== this.state.record) { let dataAdapter = new $.jqx.dataAdapter(this.state.record); this.myDropDownList.source(dataAdapter); } } handleGetEmpName(){ return this.props.getInfoRequest().then( () => { this.setState({ record: ["444", "555"] }); } } ); } myDropDownListRefBuilder = (ref) => { this.myDropDownList = ref; } render(){ var dataAdapter = new $.jqx.dataAdapter(this.state.record); return ( <div> <JqxDropDownList id="123" ref={this.myDropDownListRefBuilder} width={200} height={50} source={dataAdapter} /> <p>{this.state.record}</p> <button type="button" onClick={this.handleGetEmpName}>Load Data</button> </div> ); } }
According to React official documentation using ref=’myreference’ is discouraged. They recommend to use a reference like the one in the example. Hope it helps.
Oh! Thank you. Does myDropDownListRefBuilder make dropdownlist to react component? And I’v got an error like below. myDropDownListRefBuilder = (ref) has syntaxError.
myDropDownListRefBuilder = (ref) => { this.myDropDownList = ref; }
Hi soojung,
No,
myDropDownListRefBuilder
is just a function name, it won’t turn anything into a react component. It is just the recommended way to reference a component. JqxDropDownList is a bridge between react and the real jquery component.myDropDownListRefBuilder = (ref) => { this.myDropDownList = ref; }
is just exactly the same to:
constructor () { ... this.myDropDownListRefBuilder = this.myDropDownListRefBuilder.bind(this); } myDropDownListRefBuilder (ref) { this.myDropDownList = ref; } ... render () { ... return (<JqxDropDownList ref={this.myDropDownListRefBuilder} ... /> ... }
I can’t tell why you are having a syntax error since the code I gave is correct. This way you reference your component with
this.myDropDownList
.Also I have to say this is the way I would do it, and it doesn’t mean it is the best way to achieve it.
Maybe you need to change
ref
for any other variable name, could bereference
… What I gave you is well written but mayberef
is not a good idea to be used as variable name.OMG! Thank you, assembler. You save me. Now I set new data on jqxDropDownList successfully. Below is my final code.
import JqxDropDownList from '../jqwidgets-react/react_jqxdropdownlist.js'; class App extends React.Component { constructor(props) { super(props); this.handleGetEmpName = this.handleGetEmpName.bind(this); this.myDropDownListRefBuilder = this.myDropDownListRefBuilder.bind(this); this.state = { records: ["123", "456"] } } myDropDownListRefBuilder(ref) { this.myDropDownList = ref; } handleGetEmpName() { this.setState({ records: ["444", "555"] }); } componentDidUpdate(prevProps, prevState) { if (prevState.records !== this.state.records) { let dataAdapter = new jqx.dataAdapter(this.state.records); this.myDropDownList.source(dataAdapter); } } render(){ var dataAdapter = new jqx.dataAdapter(this.state.records); return ( <div> <p>{this.state.records}</p> <JqxDropDownList id="123" ref={this.myDropDownListRefBuilder} width={200} height={50} source={dataAdapter} /> <button type="button" onClick={this.handleGetEmpName}>Load Data</button> </div> ); } }
-
AuthorPosts
You must be logged in to reply to this topic.