füllen wählen Sie mit datajson mit Reagieren js

Ich versuche Auffüllen wählen Sie mit Reagieren js, ich bin mit dem Beispiel gegeben, auf die zu reagieren js-docs(https://facebook.github.io/react/tips/initial-ajax.html) , die jquery verwendet, um zu verwalten die ajax-aufrufen, ich bin nicht in der Lage, damit es funktioniert, bisher habe ich dieses:

hier die codepen : http://codepen.io/parlop/pen/jrXOWB

    //json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc  ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
  getInitialState: function() {
    return {
      opts:[]      
    };
  },

  componentDidMount: function() {
    var source="https://api.myjson.com/bins/3dbn8";
    this.serverRequest = $.get(source, function (result) {
      var arrTen = result[''];
      for (var k = 0; k < ten.length; k++) {
            arrTen.push(<option key={opts[k]} value={ten[k].companycase_id}> {ten[k].name} </option>);
        }

    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>        
        <select id='select1'>
          {this.state.opts}
         </select>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

html

<div id="root"></div>

jede Idee, wie es funktioniert, vielen Dank.

InformationsquelleAutor Southpaw | 2016-10-20
  1. 2

    Müssen Sie rufen Sie setState, um tatsächlich zu aktualisieren Sie Ihre Ansicht. Hier ist eine brauchbare version.

    //json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc  ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
    return {
      opts:[]      
    };
},

componentDidMount: function() {
  var source="https://api.myjson.com/bins/3dbn8";
  this.serverRequest = $.get(source, function (result) {
    var arrTen = [];
    for (var k = 0; k < result.length; k++) {
        arrTen.push(<option key={result[k].companycase_id} value={result[k].companycase_id}> {result[k].name} </option>);
    }
    this.setState({
      opts: arrTen
    });
  }.bind(this));
},

  componentWillUnmount: function() {
  this.serverRequest.abort();
},

render: function() {
  return (
    <div>        
      <select id='select1'>
        {this.state.opts}
      </select>
    </div>
  );
 }
});

ReactDOM.render(
   <App />,
  document.getElementById('root')
);
    • danke man, es funktioniert wie ein Charme!
    InformationsquelleAutor Bruce Mu
Schreibe einen Kommentar