ReactJS：Selected 属性

在 ReactJS 中，有时候我们需要设置 select 元素的选中状态。通常，可以使用 selected 属性来实现这一功能。本文将介绍 ReactJS 中 selected 属性的用法，让你能够轻松设置 select 元素的选中状态。

基本用法

在 ReactJS 中，通过给 select 元素的 option 元素设置 selected 属性来设置选中状态。例如，以下代码片段演示了如何将第二个选项设置为选中状态：

<select>
  <option value="1">第一个选项</option>
  <option value="2" selected>第二个选项</option>
  <option value="3">第三个选项</option>
</select>

需要注意的是，在 ReactJS 中，不能使用字符串类型的 selected 属性。而应该使用布尔类型的 selected 属性，例如 selected={true} 或 selected={false}。如果将 selected 属性设置为字符串，ReactJS 将会忽略该属性。

动态设置选中状态

在 ReactJS 中，我们通常需要根据状态或传递的属性来设置 select 元素的选中状态。以下代码片段演示了如何动态设置 select 元素的选中状态：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "2"
    };
  }

  render() {
    return (
      <select
        value={this.state.selectedOption}
        onChange={(e) => {
          this.setState({
            selectedOption: e.target.value
          });
        }}
      >
        <option value="1">第一个选项</option>
        <option value="2">第二个选项</option>
        <option value="3">第三个选项</option>
      </select>
    );
  }
}

在上述代码中，我们定义了一个名为 selectedOption 的状态变量，用于跟踪 select 元素的选中状态。然后，我们通过将 value 属性设置为该状态变量的值来动态设置选中状态。最后，我们通过 onChange 事件来更新选中状态。

总结

在本文中，我们介绍了 ReactJS 中 selected 属性的用法，希望你能够掌握如何使用该属性来设置 select 元素的选中状态。无论是在静态页面还是动态页面中，selected 属性都是一个非常有用的属性。