Функция, прошедшая через реквизиты, показанные не определенными

У меня три компонента Topicscreen, Listview, Listrow. Я передаю renderrowtion Topicscreen, а две других свойств , определенных в моих Listviewк func.

Теперь , когда я называю funcв Listview, реквизит передается , Listrowкак определенно в renderrowфункции, но onRowclickфункция , которая передается на Listrowэто , undefinedкогда я проверил его Listrow.

Как решить эту ошибку и перейти onRowclickкак функция Listrow?

class Topicscreen extends Component {constructor () {super (); this.onRowClick = this.onRowClick.bind (this); } componentDidMount () {this.props.dispatch (topicaction.Fetchtopics ()); } renderLoading () {return <p> Загрузка ... </ p>; } renderrow (rowid, topic) {// const selected = this.props.checkselection [rowid] const selected = ""; return (<Listrow selected = {selected} click = {this.onRowClick} rowid = {rowid}> <h3> {topic.title} </ h3> <p> {topic.description} </ p> </ Listrow> ); } onRowClick (rowid) {this.props.dispatch (topicaction.selectedchoice (rowid)); } render () {if (! this.props.topicsByurl) возвращает this.renderLoading (); return (<div className = "TopicsScreen"> Привет, я - экран темы <h1> Выберите любые три из нижеперечисленных тем </ h1> <Listview rowid = {this.props.topicsurlArray} row = {this.props.topicsByurl} func = {this.renderrow} /> </ div>); }} .js

import React, { Component } from "react";
import _ from "lodash";

export default class Listview extends Component {
  constructor() {
    super();

    this.show = this.show.bind(this);
  }

  show(rowid) {
    return this.props.func(rowid, _.get(this.props.row, rowid));
  }

  render() {
    console.log("props in listview", this.props);
    return (
      <div>
        <ul>{_.map(this.props.rowid, this.show)}</ul>
      </div>
    );
  }
}

Listview.js

import React, { Component } from "react";

export default class Listrow extends Component {
  clicking() {
    this.props.clicking(this.props.rowid);
  }

  render() {
    console.log("list row called");
    console.log("listrow props", this.props);
    const background = this.props.selected ? "#c0f0ff" : "#fff";
    return (
      <div style={{ background }} onClick={this.clicking.bind(this)}>
        {this.props.children}
      </div>
    );
  }
}

Listrow.js

renderrow

javascript,reactjs,

1

Ответов: 1


2 принят

Вам также необходимо привязать свой Topicscreenметод в Topicscreenконструкторе, или this.onRowClickвнутри renderrowвас не будет того, что вы ожидаете.

class Topicscreen extends Component {
  constructor(props) {
    super(props);
    this.onRowClick = this.onRowClick.bind(this);
    this.renderrow = this.renderrow.bind(this);
  }

  // ...
}
JavaScript, reactjs,