Question

如何将“url”参数发送到“onchange”到“getcontent”？我试了很多次，我不能！我只想将url参数放入onChange函数并发送到getContent函数..

抱歉，我的英语不好

class FetchDemo extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      posts: [],

      urlx: ''
    };

    getContent(url) {

         axios
           .get(url)
           .then(res => {
             const posts = res
               .data
               .Links
               .map(obj => obj);
             this.setState({ posts: posts, urlx: url });

             console.log('posts', posts);
           })
           .catch(error => {
             console.log('Error fetching and parsing data', error);
           });

       }

    onChange(e) {
         let myHistory = [];

         let self = this
         let index = self
           .select()
           .index();
         let dataItem = self
           .dataSource
          .view()[index];
         let urlb= dataItem.PlayList;

         if (urlb) {

          let grid = $("#listView").data("kendoListView");


           myHistory.push(dataItem);


         }

        // send urlb to getContent ?????
       }

// .........

Answer 1

不幸的是我得到“this.getContent不是函数”错误

我的所有代码;

const linkTemplate = '<li id="Links" class="nav-item links"><img class="b-lazy" src="styles/image' +
  's/texture1.jpg" data-src="#= images#" />#if (!StreamUrl){#<h2>#: Title#</h2>#}' +
  ' else {#<h2 class="streamUrl">#: Title#</h2><i class="fa fa-play-circle-o fa-3' +
  'x"></i><i class="hostCins">#=StreamUrl#</i>#}#</li>';



class FetchDemo extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      urlx: ''
    };

    this.getContent = this.getContent.bind(this)

  };

componentWillMount (){
  let linkx = this.state.urlx
  if (linkx == '') {
    linkx = 'http://example.com.json'
  } 
  this.getContent(linkx);
}


  getContent(url) {
    axios
      .get(url)
      .then(res => {
        const posts = res
          .data
          .Linkx
          .map(obj => obj);
        this.setState({ posts: posts, urlx: url });

        console.log('posts', posts);
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });

  }

  onDataBound(e) {
    $$nav.on();

    $$nav.current($("#listView li").first());

    var grid = $("#listView").data("kendoListView");

    //  $(".links").on("mouseover", function (event) {
    // $(".links").hover(function () {

    $(".nav-item.links").bind({
      nav_focus: function () {
        var gridThis = grid.dataItem(this);
        $(this).addClass('k-state-hover');

        if (gridThis) {
          let rowData = gridThis.descp;


          let rowDataTitle = gridThis.Title;

          if (rowData) {
            rowData = rowData.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
            rowData = rowData
              .replace("&nbsp;", "")
              .replace("&#8230;", "");
            $(".Description_Content").text(rowData);
          }

        }
      },
      nav_blur: function () {
        $(this).removeClass('k-state-hover');

      }
    });



    let bLazy = new Blazy();

  }


  onChange(e) {
    let myHistory = [];
    let timem = 0;


    let self = this
    let index = self
      .select()
      .index();
    let dataItem = self
      .dataSource
      .view()[index];
    let Linkx = dataItem.PlayList;


    if (Linkx) {

      let grid = $("#listView").data("kendoListView");


      myHistory.push(dataItem);


      this.getContent(Linkx);

    }

  };


  render() {


    let dataSourcem = new kendo
      .data
      .DataSource({ data: this.state.posts, pageSize: 6, page: 1 });

    $("#listView").kendoListView({
      dataSource: dataSourcem, template: linkTemplate, dataBound: this.onDataBound, change: this.onChange, selectable: "single"
      // autoBind: false, dataBinding: function (result) { console.log("databindinten:
      // ",result);}, requestStart: onRequestStart, requestEnd: onRequestEnd
    })

    return (
      <div>
        <h1>{this.props.subreddit}</h1>
        <div> </div>
        <div id="listView" />
        <ul>
          {this
            .state
            .posts
            .map(postx => <li>{postx.Title}</li>)}}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <FetchDemo subreddit="reactjs" />, document.getElementById('root'));

将setstate反应为函数

1 个答案: