React技巧之select标签设置占位符

原文链接：https://bobbyhadz.com/blog/react-placeholder-select

作者：Borislav Hadzhiev

正文从这开始~

总览

在React中为select标签设置占位符：

1. 将select标签的第一个option元素设置为disabled，并给它设置一个空字符串值。
2. 初始化select标签的state为空字符串。

// App.js

import {useState} from 'react';

const App = () => {
  // 👇️ initial value of empty string (first option)
  const [selected, setSelected] = useState('');

  const handleChange = event => {
    console.log('Label 👉️', event.target.selectedOptions[0].label);
    console.log(event.target.value);

    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option disabled={true} value="">
          --Choose and option--
        </option>
        <option value="apple">Apple 🍏</option>
        <option value="banana">Banana 🍌</option>
        <option value="kiwi">Kiwi 🥝</option>
      </select>
    </div>
  );
};

export default App;

我们成功的为select标签添加了占位符。

设置option标签

需要注意的是，我们初始化selected状态为'' （空字符串）。

const [selected, setSelected] = useState('');

接下来，设置第一个option标签为disabled，并给它设置一个空字符串值。

<div>
  <select value={selected} onChange={handleChange}>
    <option disabled={true} value="">
      --Choose and option--
    </option>
    <option value="apple">Apple 🍏</option>
    <option value="banana">Banana 🍌</option>
    <option value="kiwi">Kiwi 🥝</option>
  </select>
</div>

第一个option元素将被展示，但是用户无法使用鼠标或者键盘选择该元素，因为我们设置了disabled属性为true。

设置change事件

我们在select元素上设置了onChange事件，所以每当值有变化的时候，handleChange函数会被调用。

const handleChange = event => {
  console.log('Label 👉️', event.target.selectedOptions[0].label);
  console.log(event.target.value);

  setSelected(event.target.value);
};

event对象上的target属性是select元素的引用，因此我们可以使用event.target.value访问被选中的值。

在handleChange函数中，我们使用被选择选项的值来更新state。

遍历生成

你也可以将选项添加到一个数组中，并使用map()方法对其进行迭代，以避免重复操作。

import {useState} from 'react';

const App = () => {
  const options = [
    {value: '', text: '--Choose an option--', disabled: true},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  // 👇️ initial value of empty string (first option)
  const [selected, setSelected] = useState('');

  const handleChange = event => {
    console.log('Label 👉️', event.target.selectedOptions[0].label);
    console.log(event.target.value);

    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        {options.map(option => (
          <option
            disabled={option.disabled}
            key={option.value}
            value={option.value}
          >
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

这个例子在一个数组中定义了所有的选项，以便使我们的JSX代码更加简洁。