ruby-on-rails - 使用 React 和 Rails 后端创建评论

Question

我试图允许用户使用自定义星级组件为游戏创建评论。该组件本身正在运行，允许用户单击星值，但在他们提交评论后，星数返回为空......

下面是我的 ReviewForm、Review、ReviewsContainer(backend) 和 StarRating(custom star rating)..

import React, { Component } from 'react'
import StarRating from './StarRating'



class ReviewForm extends React.Component {
 
    state = {
        reviewed_game: '',
        rating: '',
        user_username: '',
    }
    
handleReviewedGame = (event) => {
    this.setState ({
        reviewed_game: event.target.value
     })
}


handleRating = (event) => {
    this.setState ({
        rating: event.target.value
     })
}

handleUser = (event) => {
    this.setState ({
        user_username: event.target.value
    })
}

handleForm = (e) => {
    e.preventDefault()
    // console.log(e)
    const review = {
    reviewed_game: this.state.reviewed_game,
    rating: this.state.rating,
    }
    
   this.props.addReview(review)
    }
render() {
    return (
    <div className="form-container">
            <form onSubmit={(e) => {this.handleForm(e)}}>
                <div>
                    <label>Review</label>
                    <br></br>
                    <textarea type="text" placeholder="Drop Your Review" rows={10} cols={50} value={this.state.reviewed_game} onChange={this.handleReviewedGame}  className="form"/>
                    <div>
                    <label>Stars</label>
                    <br></br>
                    <StarRating  />
                    </div>
                </div>
                <button type="submit" className="sub-review">Create Review!</button>
            </form> 
        
    </div>
        )
    }
}
export default ReviewForm;
....
import React from 'react'
import StarRating from './StarRating'


class Review extends React.Component {

    state = {
        rating: ''
    }

    handleRating = (event) => {
        this.setState ({
            rating: event.target.value
         })
    }
    
render() {
    console.log(this.props)
    return (
<div className="review-container">
        <div className="review-card"> 
        <img src='../avatar.png' className="avatar" width="50" height="50" alt='avatar'/>
         <div className="review-username">{this.props.review.user_username}</div>
            <div className="review-content">Review: {this.props.review.reviewed_game}</div>
            <StarRating value={this.state.rating} />
            </div>
         </div>
        )
    }
}
....
import React, { Component } from 'react'
import Review from './Review'
import ReviewForm from './ReviewForm'

export default class ReviewsContainer extends Component {

  state = {
    reviews: [],
}

componentDidMount(){
fetch('http://localhost:3000/reviews')
.then(res => res.json())
.then(reviews => this.setState({ reviews }))
}
            
  addReview = (review) => {
    console.log(review)
      fetch('http://localhost:3000/reviews',{
          method: "POST",
          headers: {
              "Content-Type" : "application/json",
              Accept: "application/json",
              Authorization: `bearer ${localStorage.token}`
          },
          body: JSON.stringify({ review: review }
          ),
      })
      .then(res => res.json())
      .then(( json => {
          this.setState(prevState => ({
              reviews: [...prevState.reviews, json ]
             }))
      }))
  }

  handleShowForm = () => {
    this.setState({edit: false})

  }

  render() {
    return (
      <div className="review-grid">
               <ReviewForm addReview={this.addReview} review={this.handleSubmit} />
        <h1 className="review-content">REVIEWS!</h1>
         <ul className="review-cards">
      {
        this.state.reviews.map(review => <Review key={review.id} review={review}/>)
      }  
    </ul>
      </div>
    )
  }
}

...
import React, { useState } from "react";
import { FaStar} from 'react-icons/fa'

const StarRating = () => {
  const [rating, setRating] = useState(null);
  const [hover, setHover] = useState(null);
  return (
  <div>
    {[ ...Array(5)].map((star, i) => {
      const ratingValue = i + 1;
    return <label>
     <input type='radio'
      name='rating' 
      value={ratingValue}
      onClick={() => setRating(ratingValue)}
      />
      <FaStar className ='star' color={ratingValue <= (hover || rating) ? "yellow" : "grey"}size={25}
        onMouseEnter={() => setHover(ratingValue)}
        onMouseLeave={() => setHover(null)}
      />
    </label>
  })}
  </div>
  )
}

export default StarRating

任何建议表示赞赏！谢谢你！

标签： ruby-on-railsreactjs