Javascript 如何使用django递归关系和react js回复特定注释

模型是

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 :

class CommentExampleComment扩展组件{
陈述={
评论：“”，
id:“”
}
changeHandler=事件=>{
var VAL=event.target.value
//var jpt={…this.state.comment}
//this.props.comments.map（el=>（this.setState({
//评论：VAL，
//id:el.id
this.setState（{comment:vals}）
//文件：event.target.files
}
submitHandler=e=>{
e、 预防默认值（）
var formData=new formData（）
formData.append（'content'，this.state.comment）
formData.append（'id'，this.actionInput.value）
//用于向数据库添加注释
轴心柱http://127.0.0.1:8000/account/api/comments/1，formData）。然后（res=>{
console.log（res.data）
}).catch（错误=>{
console.log（错误）
})
//用于显示评论
this.props.onShowComment（）
}
返回(



//这是评论部分
评论
{this.props.comments.map（el=>(
{el.content}
-借

-借
*/}
//这是回复部分
{el.id}
{this.actionInput=input}}value={el.id}/>
回复
))}
)}}
var mapStateToProps=state=>{
返回{
注释：state.cmnts.comment
}
}
var mapDispatchToProps=调度=>{
返回{
onShowComment:（）=>dispatch（actions.commentList（））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（CommentExampleComment）；
问题是：

---

当我尝试提交通过隐藏字段传递的回复值时”（input type=“hidden”name=“id”ref={（input）=>{this.actionInput=input}}value={el.id}）始终是最后一个注释id，但我希望注释id的值是对应于该特定注释的id。我希望该值在回复该注释时捕获注释id

onChange={e=>this.changeHandler（e，el.id）}

---

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

onChange={e=>this.changeHandler（e，el.id）}

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