React表格不向Rails应用程序中的Postgres提交值

Question

I have a rails app with React installed via Webpacker. I'm adding a couple of dynamic fields to an existing form, but I'm not getting the values submitted to the database. The non-react fields are submitting ok, and there's no errors.

I have a different number fields displayed, depending on the option selected. I understood that the below in my react component:

<input type="text_field" id="roast_country" name="roast[country]" className="form-control" />

would equate to rails:

  <div class="form-group">
    <%= form.label :country, class: 'control-label' %>
    <%= form.text_field :country, id: :roast_country, class: "form-control" %>
  </div>

Is that too simplistic? Am I fundamentally missing something?

app/javascript/BlendSelector/beans.jsx

import React from 'react'
import ReactDom from 'react-dom'
import BlendSelector from 'BlendSelector'

document.addEventListener('turbolinks:load', function () {
  var element = document.getElementById("blend-type-component");
  ReactDom.render(<BlendSelector />, element);
});

app/javascript/packs/index.jsx

import React          from 'react'

import NoBlend        from './NoBlend';
import SingleOrigin   from './SingleOrigin';
import TwoBlend       from './TwoBlend';
import ThreeBlend     from './ThreeBlend';

class BlendSelector extends React.Component {
  constructor(props) {
    super(props);
    this.onBlendSelected = this.onBlendSelected.bind(this);
    this.state = { selectedBlend: null };
  }

  onBlendSelected(event) {
    this.setState({ selectedBlend: event.target.value });
  }

  render() {
    let BlendCustomComponent = NoBlend;
    if (this.state.selectedBlend == "Single Origin") {
      BlendCustomComponent = SingleOrigin;
    } else if (this.state.selectedBlend == "Two Country Blend") {
      BlendCustomComponent = TwoBlend;
    }  else if (this.state.selectedBlend == "Three Country Blend") {
      BlendCustomComponent = ThreeBlend;
    }
    return (
      <div>
        <div className="field">
          <label htmlFor="roast_beans">Beans</label>
          <select id="beans" onChange={this.onBlendSelected} name="roast[beans]">
            <option value="">Select a blend type</option>
            <option value="Single Origin">Single Origin</option>
            <option value="Two Country Blend">Two Country Blend</option>
            <option value="Three Country Blend">Three Country Blend</option>
          </select>
        </div>
        <BlendCustomComponent />
      </div>
    );
  }
}
export default BlendSelector

app/javascript/BlendSelector/SingleOrigin.jsx

import React from 'react'

class SingleOrigin extends React.Component {
  render() {
    return (
      <div>
        <div className="form-group">
          <label htmlFor="country">Country</label>
          <input type="text_field" id="roast_country" name="roast[country]" className="form-control" />
        </div>
        <div className="form-group">
          <label htmlFor="region">Region</label>
          <input type="text_field" id="roast_region" name="roast[region]" className="form-control" />
        </div>
      </div>
    );
  }
}
export default SingleOrigin

roasts_controller.rb

def roast_params
  params.require(:roast).permit(:roaster, :name, :country, :region, :country2, :region2, :country3, :region3, :bestfor, :beans, :roast, :tastingnotes, :notes, :slug)
end

And I'm using the component in a Rails form by calling <div id="blend-type-component"></div> :

app/views/roasts/_form.html.erb

<%= form_with(model: roast, local: true) do |form| %>
  <% if roast.errors.any? %>
    <div id="error_explanation">
      <div class="alert alert-danger" role="alert">
      <h2><%= pluralize(roast.errors.count, "error") %> prohibited this roast from being saved:</h2>

      <ul>
      <% roast.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  </div>
  <% end %>

<form>


  <div class="field form-group">
    <%= form.label :roaster, class: 'control-label' %>
    <%= form.text_field :roaster, id: :roast_roaster, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= form.label :name, class: 'control-label' %>
    <%= form.text_field :name, id: :roast_name, class: "form-control" %>
  </div>

<div id="blend-type-component"></div>

  <div class="form-group">
    <%= form.label :bestfor, "Best for", class: 'control-label' %><br />
    <%= form.select :bestfor, [ 'Espresso','Filter' ], :prompt => 'Select One', id: :roast_bestfor, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= form.label :roast, class: 'control-label' %><br />
    <%= form.select :roast, [ 'Light','Medium','Dark' ], :prompt => 'Select One', id: :roast_roast, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= form.label :tastingnotes, "Tasting Notes (separate with commas, e.g chocolate, citrus)", class: 'control-label' %><br  />
    <%= form.text_area :tastingnotes, id: :roast_tastingnotes, class: "form-control" %>
  </div>
<br />

  <div class="actions">
    <%= form.submit class: "btn btn-primary" %>
  </div>
<% end %>

</form>

Answer 1

I believe the main problem is that your SingleOrigin component isn't actually doing any submitting. Here's a modified version of the component with handleSubmit events:

class SingleOrigin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    // handle multiple inputs
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value // set the key as the name of the input element
    });

    console.log(this.state);
  }

  handleSubmit(event) {
    // Modify this to handle your actual submits to Postgres.
    alert('The following was submitted: ' + this.state.country + ', ' + this.state.region);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="country">Country</label>
          {/* I modified your input names to just the keys so you can use the ES6 computed property name syntax, when you do your handle submit code, send it to the proper variables. */}
          <input type="text_field" id="roast_country" name="country" className="form-control" onChange={this.handleChange} />
        </div>
        <div className="form-group">
          <label htmlFor="region">Region</label>
          <input type="text_field" id="roast_region" name="region" className="form-control" onChange={this.handleChange}/>
        </div>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Also, you want to use the form element to make full use of React's state features. To read more on Forms, see this doc article . You'll want to modify your other components likewise to handle submission of the form data.