Question

我想使用反应评级（https://gist.github.com/wen-long/8644243）来实施图书评论页面，并添加

<Rating />

在我自己的组件中，我能够在页面上显示评级元素，但我不知道如何在此页面上提供onChage事件和onClick事件。我的代码现在是这样的。

var Rating = require('react-rating');

class BookPage extends Component {
  handleRate(rate) {
    "use strict";
    console.log("the rate is:"+rate);
  }

  render() {
    book = this.props.document;
    console.log("book:"+book)
    //console.log(util.inspect(book, false, null));

    return (
      <div className="BookPage">

        <div style={{maxWidth: "300px"}}>
          <Accounts.ui.LoginForm />
        </div>

        <FlashContainer component={FlashMessages}/>

        <BookItem book={book}/>

        <Rating />   // how to add events ?

        <div className="comments-thread">
          <h4 className="comments-thread-title">BookPosts</h4>
          <ListContainer
            collection={Posts}
            publication="bookPosts.list"
            terms={{book_id: book._id}}
            limit={5}
            joins={Posts.getJoins()}
            component={BookPostsList}
                />
        </div>
      </div>
    )
  }
}

Answer 1

@azium评论正确。您需要传递一个期望rate作为参数的函数。

您得到的错误是因为您传递给onClick属性的函数未使用rating参数，而是使用未定义的参数（rate）。试试这个：

<Rating onClick={rate => this.handleRate(rate)} />

现在反应评级提供了三个callbacks：

onChange更改所选费率时调用。
onClick点击费率时调用。
onRate输入或退出费率时调用。

所有这些都接受相同类型的功能：

function (rate) {
  console.log(rate);
}

或使用箭头功能：

rate => console.log(rate);

如何使用反应评级包的事件？

1 个答案: