当你试图设置<option>的"selected"属性时，你可以做React警告你的事情:

在<select>上使用defaultValue或value道具，而不是在<option>上使用设置。

所以，你可以使用选项。在您选择的defaultValue上

如果你使用无状态，那么

const IndexPage =({states, selectedState}) => {
return(
    <select id="states" defaultValue={selectedState} name="state">
{states.map(state=> (
                      <option value={state.id} key={state.id}>{state.name}</option>
                      ))
                      }
                    </select>
)
}

主点控制组件

您希望设置一个“受控组件”。这将要求您在元素上设置值，并处理on change事件以更新值。

https://reactjs.org/docs/forms.html#controlled-components

例子

https://codepen.io/codyswartz/pen/QWqYNrY

简单功能组件选择示例

这还包括一个默认值和灰色。

const defaultSelectValue = "Select a fruit"

const SelectExample = () => {
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      <label htmlFor="fruits">Fruits</label>{' '}
      <select
        id="fruits"
        name="fruits"
        defaultValue={selected}
        style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
        onChange={e => setSelected(e.target.value)}
      >
        <option>{defaultSelectValue}</option>
        <option>Banana</option>
        <option>Apple</option>
        <option>Orange</option>
      </select>

      <h2>Selected: {selected}</h2>
    </>
  )
}

// Usage
<SelectExample />

带有默认值的动态可重用示例

这将接受一个字符串集合，并将第一个字符串作为默认值。

const SelectExample = ({ name, items }) => {
  const defaultSelectValue = items[0]
  const [selected, setSelected] = useState(defaultSelectValue)

  return (
    <>
      <label htmlFor={name}>{name}</label>{' '}
      <select
        id={name}
        name={name}
        defaultValue={selected}
        style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
        onChange={e => setSelected(e.target.value)}
      >
        {items.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>

      <h2>Selected: {selected}</h2>
    </>
  )
}

// Usage
<SelectExample
  name="fruits"
  items={['Select a fruit', 'Banana', 'Apple', 'Orange']}
/>

简单地添加作为选择标签的第一个选项:

<option disabled hidden value=''></option>

这将成为默认值，当您选择一个有效的选项将设置在您的状态

下面是一个完整的解决方案，包含了最佳答案和下面的评论(这可能会帮助那些挣扎着把它们拼凑在一起的人):

UPDATE FOR ES6(2019) -使用箭头函数和对象解构

在主要组成部分:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

所包含的组件(现在是一个无状态函数):

export const ReactExample = ({ name, value, handleChange }) => (
  <select name={name} value={value} onChange={handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

之前的答案(使用绑定):

在主要组成部分:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

所包含的组件(现在是一个无状态函数):

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

主组件维护fruit的选中值(处于状态)，被包含的组件显示select元素并将更新传递回主组件以更新其状态(然后循环回被包含的组件以更改所选值)。

请注意，使用了名称道具，它允许您为同一表单上的其他字段声明一个handleChange方法，而不管它们的类型是什么。

针对MULTISELECT / optgroups发布类似的答案:

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}