时间戳

首页 > 解决方案 > React-Select - 带有自定义处理程序的可点击值

reactjs - React-Select - 带有自定义处理程序的可点击值

问题描述

使用 react-select，我想了解单击选定值（多）时如何获取事件。

我正在使用带有多选功能的 react-select ( https://react-select.com/home )。作为一种魅力，但我想让值可点击/切换以更改颜色/状态（而不是添加/删除）。最后以灰色/颜色显示它们以指示标记状态，并将底层状态用于后续代码。有什么办法可以做到这一点，如果有，怎么做？

标签： reactjsreact-select

解决方案

您可以传入自定义MultiValueLabel或MultiValueContainer添加onClick处理程序。

import React from "react";
import ReactDOM from "react-dom";
import Select, { components } from 'react-select';


const options = [
  {value: '1', label: 'Item 1', isToggled: true},
  {value: '2', label: 'Item 2', isToggled: false},
  {value: '3', label: 'Item 3', isToggled: false},
  {value: '4', label: 'Item 4', isToggled: false},
  {value: '5', label: 'Item 5', isToggled: false},
  {value: '6', label: 'Item 6', isToggled: false},
]

const ReactSelectStyles = () => ({
  multiValueLabel: (styles, {data: { isToggled }}) => ({
    ...styles,
    backgroundColor: isToggled ? 'hotpink' : null,
    color: isToggled ? 'white' : null
  }),
});

const handleMultiValueClick = (e, props) => {
  e.stopPropagation();
  e.preventDefault();


  console.log('A multi value has been clicked', props);

  const option = options.find(option => option.value === props.data.value);

  option.isToggled = !option.isToggled
}

const MultiValueLabel = props => {
  return (
    <div onClick={(e) => handleMultiValueClick(e, props)}>
      <components.MultiValueLabel {...props} />
    </div>
  );
};

function App() {
  return (
    <Select
    closeMenuOnSelect={false}
    components={{ MultiValueLabel }}
    defaultValue={[options[0], options[2], options[4]]}
    isMulti
    options={options}
    styles={ReactSelectStyles()}
  />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例

推荐阅读