如何使用react-rating包的事件？

我想用反應評級（https://gist.github.com/wen-long/8644243）來實現書評頁面，用我自己的組件添加如何使用react-rating包的事件？

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

來源

2016-04-19 user2804234

'<評分的onClick = {等級=> this.handleRate（率）} />'？ – azium

@azium感謝您的回覆，我添加了這段代碼，瀏覽器控制檯報告了未捕獲的引用錯誤：未定義速率。如何解決這個錯誤？ – user2804234

@azium評論什麼是正確的。您需要傳遞一個需要rate作爲參數的函數。

您得到的錯誤是因爲您傳遞給onClick屬性的函數未使用rating參數，而是一個未定義的參數（rate）。右

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

現在反應評級提供了三種callbacks：試試這個

onChange當選擇的速率發生更改時調用。
onClick單擊費率時調用。
onRate當費率輸入或離開時調用。

他們都接受相同類型的功能：

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

或者用箭頭功能：

rate => console.log(rate);

來源

2016-04-23 09:47:59 dreyescat

如何使用react-rating包的事件？

回答

相關問題