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

React 6月前 178

总览

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

将select标签的第一个option元素设置为disabled，并给它设置一个空字符串值。
初始化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;

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

我们成功的为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;