React让你更容易做到这一点。而不是在每个选项上定义selected，你可以(也应该)简单地在select标签上写value={optionsState}:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

有关更多信息，请参阅React选择标签文档。

此外，React会自动理解布尔值，所以你可以简单地写(注意:不推荐)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

它会适当地输出" selected "

if you store objects in a state.

class Studentinformation extends Component
{
    constructor(props)
 {
   super(props);
   this.handlechange=this.handlechange.bind(this);
   this.handleSubmit=this.handleSubmit.bind(this);
   
   this.state={Studentinfo:{
          Name:'',
          Skill:'Java',
          Address:''
        }};
 }
 handlechange(event)
 {
   const name=event.target.name;
   const value=event.target.value;

   this.setState({ Studentinfo:
  {
    ...this.state.Studentinfo,
    [name]:[value]
  }});
 }
 handleSubmit(event)
 {
  event.preventDefault();
 }
 render(){
   return (
  <div>
    <form onSubmit={this.handleSubmit}>
      <label>Name: <input type="text" name="Name" value={this.state.Studentinfo.Name} onChange={this.handlechange}></input></label>
      <br/>
      <label>Skills: 
        <select value={this.state.Studentinfo.Skill} name="Skill" onChange={this.handlechange}>
          <option value="C++" >C++</option>
          <option value="C#">C#</option>
          <option  value="Java">Java</option>
        </select>
        </label>
        <br/>
        <textarea value={this.state.Studentinfo.Address} onChange={this.handlechange}/>
        <br/>
      <input type="submit" value="Submit"></input>
    </form>
  </div>
   );
 }

}

主点控制组件

您希望设置一个“受控组件”。这将要求您在元素上设置值，并处理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']}
/>

使用defaultValue预选Select的值。

<Select defaultValue={[{ value: category.published, label: 'Publish' }]} options={statusOptions} onChange={handleStatusChange} />

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

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方法，而不管它们的类型是什么。

下面是如何做到这一点的最新例子。来自react文档，加上自动绑定“肥箭头”方法语法。

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

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

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}