如何使用django递归关系回复特定评论并反应js

Question

型号是

class Comment(models.Model):
    profile = models.ForeignKey(Profile,on_delete=models.CASCADE)
    account = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE)
    content = models.TextField(max_length=160)
    reply = models.ForeignKey('Comment',null=True,related_name="replies",on_delete=models.CASCADE)
    timestamp = models.DateTimeField(auto_now_add=True)

使用 react 添加和显示评论

class CommentExampleComment extends Component {
state={
  comment:'',
  id:''
}
changeHandler=event=>{
  var vals =event.target.value
  // var jpt = {...this.state.comment}
  // this.props.comments.map(el=>(this.setState({
  //   comment:vals,
  //   id:el.id
  this.setState({comment:vals})
    // file:event.target.files
}
submitHandler=e=>{
  e.preventDefault()
  var formData = new FormData()
  formData.append('content',this.state.comment)
  formData.append('id',this.actionInput.value)
//used to add comment to db
  axios.post('http://127.0.0.1:8000/account/api/comments/1',formData).then(res=>{ 
    console.log(res.data)
  }).catch(err=>{
    console.log(err)
  })
// used for showing comment 
  this.props.onShowComment()
}
return(
      <Aux>
      <br></br>


        // THIS IS COMMENT SECTION
        <div class="main-comment-section">
            <form method="POST" onSubmit={this.submitHandler}>
      <textarea id="w3mission" onChange = {this.changeHandler} rows="4" cols="50"></textarea>
                <button name ="button">Comment</button>
            </form>
            {this.props.comments.map(el=>(
        <div>
        <blockquote class="blockquote">
                <p class="mb-0">{ el.content }</p>
                <footer class="blockquote-footer">-by <cite title="Source Title"></cite></footer>
            </blockquote>
                <blockquote class="blockquote">
                    <p class="mb-0"></p>
                    <footer class="blockquote-footer">-by <cite title="Source Title"></cite></footer>
                </blockquote> */}

                //THIS IS REPLY SECTION
                <div class="form-group row">
                  <form method="post" onSubmit={this.submitHandler}>

           <h1>{el.id}</h1>
                     <input type="hidden" name="id" ref={(input) => { this.actionInput = input }} value ={el.id}/>

                <textarea id="w3mission" onChange = {this.changeHandler} rows="4" cols="50"></textarea>

                     <button name ="button">Reply</button>
                  </form>
                </div>
             </div>
      ))}
        </div>
    </Aux>)}}
var mapStateToProps = state=>{
  return{
    comments:state.cmnts.comment
  }
}
var mapDispatchToProps = dispatch=>{
  return{
    onShowComment:()=>dispatch(actions.commentList())
  }
}
export default connect( mapStateToProps, mapDispatchToProps )( CommentExampleComment );
PROBLEM IS :

当我尝试提交通过隐藏字段传递的回复值时“（输入类型=“隐藏”名称=“id”参考={（输入）=>{this.actionInput=输入}}值={el.id })"始终是最后一个评论 id，但我希望评论 id 的值是对应于该特定评论的 id。我希望该值在回复该评论时捕获评论 id

Answer 1

onChange = {e => this.changeHandler(e, el.id) }

在 changeHandler 上获取 el.id 并存储在状态中，在您的 api 调用中使用此状态。