使用 onchange 和 react select - Javascript

在 React 中，<select> 元素是常用的表单元素之一。React Select 是一个流行的 React 组件，可以使 <select> 的使用更加便捷。

使用 onchange 事件处理程序可以在无需刷新页面的情况下立即响应用户输入。

React Select

React Select 是一个 React 组件，它允许您创建一个更漂亮的、可定制的、易用的 <select> 元素。

在使用 React Select 之前，您需要安装 react-select 库。

npm install react-select

要使用 React Select，您需要导入它并在代码中使用它。

import Select from 'react-select';

function MyComponent() {
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];

  return (
    <Select options={options} />
  );
}

在此示例中，options 是一个对象数组，每个对象都有一个 value 属性和一个 label 属性。然后将其传递给 React Select 组件的 options prop 中。

在渲染此组件时，将生成具有上述选项的 <select> 元素，并将其显示在屏幕上。

要获取用户从 React Select 中选择的项目，请使用 onChange 属性来定义一个回调函数。

import Select from 'react-select';

function MyComponent() {
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];

  const handleChange = (selectedOption) => {
    console.log(`Option selected:`, selectedOption);
  };

  return (
    <Select options={options} onChange={handleChange} />
  );
}

在此示例中，handleChange 是一个函数，当用户从 React Select 中选择一个选项时会被调用。选项的值将作为回调函数的参数传递。

onchange 事件

onchange 事件是 HTML 元素的标准事件之一，当元素的值被修改时会触发该事件。

例如，在下面的示例中，当用户选择下拉列表中的不同选项时，将调用 handleChange 函数并将选定的值作为参数传递。

<select onchange="handleChange(this.value)">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<script>
  function handleChange(selectedValue) {
    console.log(`Option selected:`, selectedValue);
  }
</script>

在此示例中，this.value 表示当前选定的选项的值。

结论

React Select 可以使选择 <select> 元素变得更加容易和美观。通过使用 onchange 事件处理程序，可以在用户交互时立即响应输入。