jQuery UI Widgets Forums React Load new data to dropdownlist when button click

This topic contains 5 replies, has 2 voices, and was last updated by  soojung 6 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • soojung
    Participant

    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>
          );
      }
    }

    assembler
    Participant

    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.


    soojung
    Participant

    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;
        }

    assembler
    Participant

    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.


    assembler
    Participant

    Maybe you need to change ref for any other variable name, could be reference… What I gave you is well written but maybe ref is not a good idea to be used as variable name.


    soojung
    Participant

    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>
            );
        }
    }
    
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.