React中为Select组件设置默认值（附SearchForm.js代码）

Got it, let's walk through how to add a default value to your period select component. Here's what you need to do:

Step 1: Initialize State with Your Desired Default Value #

First, update the initial state in your constructor to set period to the value of the option you want selected by default. For example, if you have an option like <option value="1month">Last 1 Month</option>, set period to "1month" initially.

Also, I noticed your experience state definition is a bit off—you don't need to use type: Array there; just initialize it as an empty array directly (state values don't require type declarations like props do).

Step 2: Make the Select a Controlled Component #

Add the value prop to your select element, binding it to this.state.period. This tells React to control the select's value based on your component state, which will enforce the default value you set.

Modified Full Code #

import React from 'react';
import axios from 'axios';

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      position: '',
      area: '',
      // Set your desired default value here (match an option's value)
      period: '1month',
      // Fixed experience initialization—just set to empty array
      experience: []
    };
    this.handlePeriodChange = this.handlePeriodChange.bind(this);
  }

  handlePeriodChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    return (
      <form className="search-form">
        {/* ... other form fields you had ... */}
        <select
          name="period"
          value={this.state.period} // Bind to state to enforce controlled behavior
          onChange={this.handlePeriodChange}
        >
          {/* Ensure your options have values matching the default you set */}
          <option value="1month">Last 1 Month</option>
          <option value="3months">Last 3 Months</option>
          <option value="6months">Last 6 Months</option>
          <option value="1year">Last 1 Year</option>
        </select>
        {/* ... rest of your form content ... */}
      </form>
    );
  }
}

export default SearchForm;

Key Notes #

• The default value you set in state.period must match exactly the value attribute of one of your <option> elements. If they don't match, the select will show an empty state.
• By using value={this.state.period}, you're making the select a controlled component—this ensures that the select's value always syncs with your component state, including the initial default selection.

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