如何在关联的模型上创建红宝石模型上的反应表单

Question

我是React和Ruby on Rails开发的初学者，在我的项目中，我有两个模型。第一个模型Post.rb和Comment。

Post.rb

class Post < ApplicationRecord
    has_many :comments, dependent: :destroy

    validates :title, presence: true, length: { minimum: 5 }
    validates :content, presence: true, length: { minimum: 140 }
end

Comment.rb

class Comment < ApplicationRecord
  belongs_to :post

  validates :content, presence: true, length: { minimim: 140 }
end

我想创建一个React表单来插入Comment，然后选择Post在数据库中注册，并将comment关联到Post。

按照下面的表单发布和表单注释进行操作。我无法以注释形式在组合框中发布帖子。

NewPostForm.js

import React from 'react';
import { Form, Segment,Button, Grid } from 'semantic-ui-react';

const NewPostForm = ({onNewPost = f => f}) => {
    let _title, _content 
    const submit = e => {
        e.preventDefault()
        onNewPost(_title.value, _content.value)
        _title.value = ''
        _content.value = ''
        _title.focus()
    }
    return (
        <Grid>
            <Grid.Column width={16}>
                <Segment>
                    <Form onSubmit = { submit }>
                        <Form.Field required>
                            <input ref = { input => _title = input } placeholder="Título..."/>
                        </Form.Field>
                        <Form.Field required>
                            <textarea ref = { textarea => _content =textarea } placeholder="Conteúdo..."/>
                        </Form.Field>
                        <Button primary>Criar Post</Button>
                    </Form>
                </Segment>
            </Grid.Column>
        </Grid>

    )
}

export default NewPostForm;

NewCommentForm.js

import React from 'react';
import { Form, Segment,Button,Grid } from 'semantic-ui-react'

const NewCommentForm = ({onNewComment = f => f}) => {
    let _content, _post_id

    const submit = e => {
        e.preventDefault()
        onNewComment(_content.value, _post_id.value)
        _content.value = ''
        _post_id.value = ''
        _content.focus()
    }
    return (
        <Grid>
            <Grid.Column width={16}>
                <Segment>
                    <Form onSubmit = { submit }>
                        <Form.Field required>
                            <input ref = { input => _content = input } placeholder="Conteúdo..."/>
                        </Form.Field>
                        <Form.Field required>
                            <select ref = { select => _post_id = select } placeholder="Conteúdo..."/>

                        </Form.Field>
                        <Button primary>Criar Comentário</Button>
                    </Form>
                </Segment>
            </Grid.Column>
        </Grid>

    )
}