如何结合redux-form使用react-select？聚焦失焦后输入框清空问题排查

Let’s dig into why your select input is clearing on blur—there are a few key issues with how you’re handling values and event handlers, plus some conflicting prop spreading that’s causing the problem.

What’s Causing the Issue: #

1. Incorrect Value Access: You’re using input.value.value, but Redux-Form stores the full selected option object from React-Select (not just a nested value property). When the input blurs, if input.value becomes undefined or isn’t an object, this will break and leave the select empty.
2. Prop Overriding: Spreading {...props} at the end of your React-Select component is overriding the onChange, onBlur, and value props you just set. The original input prop from Redux-Form gets mixed in here, causing unexpected behavior.
3. Mismatched Blur Handling: React-Select’s onBlur event doesn’t automatically sync with Redux-Form’s onBlur the way you might expect—we need to explicitly trigger it with the correct value.

Fixed Code: #

Here’s the adjusted SelectField component that fixes these issues:

import Select from 'react-select'
import StyledSelectField, { StyledMessages } from './style'

const SelectField = props => {
  const { input, label, placeholder, options, meta, ...StyledProps } = props
  const { onChange, onBlur, onFocus, value } = input

  // Handle React-Select's onChange (returns the full selected option object)
  const handleSelectChange = selectedOption => {
    onChange(selectedOption)
  }

  // Sync React-Select's blur with Redux-Form's onBlur
  const handleSelectBlur = () => {
    onBlur(value)
  }

  return (
    <StyledSelectField {...StyledProps} meta={meta} hasValue={!!value}>
      <label htmlFor={input.name}>{label}</label>
      {placeholder && <div className="placeholder">{placeholder}</div>}
      <Select
        name={input.name}
        value={value} // Use the full option object stored in Redux-Form
        onChange={handleSelectChange}
        onBlur={handleSelectBlur}
        onFocus={onFocus}
        options={options}
        // Removed {...props} to avoid overriding our custom handlers/value
      />
      <StyledMessages>
        {meta.touched && (
          (meta.error && <span className="error">{meta.error}</span>) ||
          (meta.warning && <span className="warning">{meta.warning}</span>)
        )}
      </StyledMessages>
    </StyledSelectField>
  )
}

class TestingCycleForm extends PureComponent {
  render() {
    const { preMonitoring, handleChange, handleSubmit } = this.props
    return (
      <div>
        <Field
          label="18%"
          name="patientPercentage"
          className="form-control"
          component={SelectField}
          options={Config.get('/PATIENT_PERCENTAGE')}
        />
      </div>
    )
  }
}

Key Fixes Explained: #

• Value Prop: We now use value={value} directly from input.value, since Redux-Form stores the full selected option object from React-Select.
• Controlled Event Handlers: Explicit handleSelectChange and handleSelectBlur functions ensure we pass the correct data to Redux-Form’s handlers, avoiding conflicts with React-Select’s event structure.
• Removed Prop Spread: Getting rid of {...props} on the React-Select component stops the original Redux-Form input prop from overriding our custom settings.
• Blur Sync: handleSelectBlur triggers Redux-Form’s onBlur with the current selected value, keeping the form state in sync when the input loses focus.

Give this a shot—your select should no longer clear when it loses focus!

内容的提问来源于stack exchange，提问作者Ashish Choudhary