如何在React及React+Rails应用中引入第三方选择器/日期选择器？

Great question! Let's break this down into two clear sections: first, adding these components to a plain React.js app, then the specific workflow for React + Rails setups. I'll also share my go-to reliable plugins that are easy to integrate and maintain.

First, the general workflow for any React app is install the package, import it into your component, and wire it up with state. Here are my top recommendations:

Select Picker: React Select #

This is the industry standard for select components—feature-rich, customizable, and widely supported. It handles search, multi-select, custom option rendering, and more out of the box.

Steps to integrate: #

1. Install the package:

npm install react-select
# or with yarn
yarn add react-select

2. Use it in your component:

import { useState } from 'react';
import Select from 'react-select';

// Define your options
const fruitOptions = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

export default function FruitSelector() {
  const [selectedFruit, setSelectedFruit] = useState(null);

  return (
    <div>
      <h3>Pick your favorite fruit</h3>
      <Select
        value={selectedFruit}
        onChange={setSelectedFruit}
        options={fruitOptions}
        placeholder="Select a fruit..."
      />
      {selectedFruit && <p>You selected: {selectedFruit.label}</p>}
    </div>
  );
}

Date Picker: React Datepicker #

Lightweight, highly customizable, and supports date/time selection. It plays nicely with date libraries like date-fns or moment if you need advanced date handling.

Steps to integrate: #

1. Install the package and a date utility (we'll use date-fns here):

npm install react-datepicker date-fns
# or yarn
yarn add react-datepicker date-fns

2. Import the component and required styles:

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function EventDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div>
      <h3>Choose your event date</h3>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="MM/dd/yyyy"
        minDate={new Date()} // Disable past dates
      />
      <p>Selected date: {selectedDate.toLocaleDateString()}</p>
    </div>
  );
}

The good news is that integrating these components into a React + Rails app follows almost the same installation steps as plain React—you just need to handle form synchronization with Rails' backend.

Key Workflow for Rails Integration #

Rails uses form parameters to process requests, so you'll want to sync your picker's state with a hidden input that Rails can read. Here's how to do this for both component types:

Example: React Select with Rails Form #

import { useState } from 'react';
import Select from 'react-select';

export default function ProductForm() {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const categories = [
    { value: 'electronics', label: 'Electronics' },
    { value: 'clothing', label: 'Clothing' },
    { value: 'home', label: 'Home Goods' },
  ];

  return (
    <form action="/products" method="post" className="product-form">
      {/* Hidden input to pass value to Rails */}
      <input
        type="hidden"
        name="product[category]"
        value={selectedCategory ? selectedCategory.value : ''}
      />

      <Select
        value={selectedCategory}
        onChange={setSelectedCategory}
        options={categories}
        placeholder="Select product category..."
      />

      <button type="submit" className="btn btn-primary">Create Product</button>
    </form>
  );
}

Example: React Datepicker with Rails Form #

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { format } from 'date-fns';

export default function BookingForm() {
  const [bookingDate, setBookingDate] = useState(new Date());

  return (
    <form action="/bookings" method="post" className="booking-form">
      {/* Format date to Rails' expected yyyy-MM-dd format */}
      <input
        type="hidden"
        name="booking[date]"
        value={format(bookingDate, 'yyyy-MM-dd')}
      />

      <DatePicker
        selected={bookingDate}
        onChange={(date) => setBookingDate(date)}
        dateFormat="yyyy-MM-dd"
        minDate={new Date()}
      />

      <button type="submit" className="btn btn-primary">Confirm Booking</button>
    </form>
  );
}

Recommended Plugins for React + Rails #

• React Select: Same as above—works seamlessly with Rails forms once you sync the hidden input.
• React Datepicker: Perfect for most date selection needs, easy to format dates for Rails.
• Flatpickr (via react-flatpickr): A super lightweight, dependency-free option if you want a minimal date picker. Install with yarn add react-flatpickr flatpickr, then import the component and its styles.

Rails-Specific Notes #

• For Rails 7+ using jsbundling-rails (esbuild/rollup), just install packages via npm/yarn as usual—Rails will bundle them automatically.
• For older Rails versions using Webpacker, the installation steps are identical; Webpacker will handle importing the components into your React packs.

内容的提问来源于stack exchange，提问作者Arun Sanakr