要实现表格提交React和Rails的解决方法，你可以按照以下步骤进行操作：

1. 在React中创建一个包含表单的组件：

import React, { useState } from 'react';

const FormComponent = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // 发送表单数据到Rails后端
    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then(response => response.json())
      .then(data => {
        // 处理返回的数据
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    

      
      
      
      提交
    
  );
};

export default FormComponent;

2. 在Rails中创建一个接收表单数据的路由和控制器动作： 首先，确保你已经安装了Rails的cors和json gem。然后，在routes.rb文件中添加以下代码：

Rails.application.routes.draw do
  namespace :api do
    post '/submit', to: 'form#submit'
  end
end

接下来，在app/controllers/api/form_controller.rb文件中创建一个名为submit的动作：

module Api
  class FormController < ApplicationController
    def submit
      # 处理表单数据
      render json: { message: '提交成功' }
    end
  end
end

3. 在Rails应用程序中启用CORS（跨源资源共享）： 在config/application.rb文件中添加以下代码：

module YourRailsAppName
  class Application < Rails::Application
    # ...
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
      end
    end
    # ...
  end
end

4. 在React应用程序中使用FormComponent组件： 在你的React应用程序的入口文件中，例如src/App.js，添加以下代码来使用FormComponent组件：

import React from 'react';
import FormComponent from './FormComponent';

const App = () => {
  return (
    

      
表格提交React和Rails
      
    
  );
};

export default App;

这样，当用户在表单中填写数据并提交时，React将发送表单数据到Rails后端，然后后端将处理数据并返回响应给前端。你可以根据自己的需求在Rails的控制器动作中进一步处理和验证表单数据。