标签: react-select

如何使用下面没有和属性的 JSON 数据填充反应选择中的选项？valuelabel

[       
    {
        "sortCode": "55-77-42",
        "accountNumber": "08488234",
        "accountType": "Savings Account",
        "accountName": "Mannuel Sam"
    },
    {
        "sortCode": "12-43-98",
        "accountNumber": "12365432",
        "accountType": "Savings Account",
        "accountName": "John Cena"
    },
    {
        "sortCode": "87-20-51",
        "accountNumber": "76491234",
        "accountType": "Savings Account",
        "accountName": "Shweta Pandey"
    },
    {
        "sortCode": "56-73-39",
        "accountNumber": "09865479",
        "accountType": "Savings Account",
        "accountName": "Prerna Singh"
    }
]

我正在使用react-select3.2.0。当我打开选择框并选择一个选项时。然后我再次打开选择下拉列表，然后所选值就会出现。但是，当下拉列表的值来自道具而不是通过打开下拉列表手动选择时，问题就出现了。然后，当我打开下拉菜单时，它不会滚动到查看所选值。我也尝试过react-select的menuScrollIntoView={true}属性，但我的问题仍然存在。我的选择组件如下；

import Select from "react-select";
.
.
.
    <Select 
      options={props.options}
      // isLoading={props.options ? true: false}
      onMenuOpen={onOpen}
      value={props.defaultOption}
      onChange={(event: any) => props.onSelect(event)}
      className ={"MyDropdown"}
      classNamePrefix={"MyDropdown"}
      // menuShouldScrollIntoView={true}
      isDisabled={props.isDisabled}
      isSearchable={props.isSearchable}
      >
    </Select>

当没有选择任何内容时

当没有选择任何内容时，它工作得很好。

当选择一个选项时（问题）

正如您在上面看到的，即使我选择了一个选项（灰），它也表示所有内容都已选择。我这样做了console.log(isSelected)，它说一切都已选择true..

应该是这样的...

反应选择选定的道具

我复制了很多代码，修改了几行。

这是我的代码

预先感谢您对我的帮助！

如果您有什么建议，请来找我！

const dot = (color = '#ccc') => ({
  display: 'flex',
  alignItems: 'center',

  ':before': {
    backgroundColor: color,
    borderRadius: 10,
    content: '" "',
    display: 'block',
    marginRight: 10,
    height: 15,
    width: 15,
  },
});

const colourStyles = {
  control: (styles, { selectProps: { width } }) => ({
    ...styles,
    width: width,
  }),
  option: (styles, { data, isSelected, isFocused }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: …

我正在尝试在我的项目中修复以下示例。Sopage-wrapper的高度应该模拟一个包含一些内容的页面，因此是heightCSS 属性。我select-container故意放在中间，以便在其上方和下方都有空间。例如，如果我在登陆页面时打开菜单，那么还没有滚动，ReactSelect 不会在顶部打开它，而是在底部打开它并向下滚动到它。我尝试了menuPlacement = "auto"prop，正如你所看到的，因为从我在文档中看到的，它应该自动进行定位，但它似乎不起作用。

我的组件

import ReactSelect from "react-select";

const options = [
  { label: "No 1", value: "test_1" },
  { label: "No 2", value: "test_2" },
  { label: "No 3", value: "test_3" },
  { label: "No 4", value: "test_4" }
];

export default function App() {
  return (
    <div className="page-wrapper">
      <div className="select-container">
        <ReactSelect options={options} menuPlacement="auto" />
      </div>
    </div>
  );
}

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} …

我有一个反应选择组件，其中我从 api 数据归档选项，每当我从 api 编辑一个人的姓名时，选项中的名称会发生​​变化，但值上的名称保持不变。

我想在更改人名后更改 select 的值。

--这里我使用react-query更新一个人的名字

  const deliveryPersonUpdate = (values) => {
    const id = deliveryBoy && deliveryBoy.id;
    const params = { deliveryBoyId: id, ...values };
    updateDeliveryPerson.mutate(params, {
      onSuccess: (data) => {
        toggle();
        setDeliveryBoy(data?.delivery_boy);
        queryClient.invalidateQueries([GET_DELIVERY_BOY_LIST.name]);
        toast.success("Category Updated");
      },
      onError: (error) => {
        showErrorMessages({ error });
      },
    });
  };

  const handleSubmit = (values) => {
    deliveryPersonUpdate(values);
  };

--选择组件

<Select
 onChange={(obj) => handleChange(obj)}
                paintBg
                noOptionsMessage={noOptionsMessage}
                name="deliveryBoySelect"
                className={cx(styles.addDeliveryBoySelect)}
                defaultValue={
                  !isEmpty(data?.delivery_boys) && {
                    label: data?.delivery_boys?.[0].name,
                    value: data?.delivery_boys?.[0].id,
                  }
                }
                options={data?.delivery_boys.map((d) => …

我正在使用React-Select。

目前，我正在从elasticsearch获取数据并将其设置为state：

var new_titles = []
body.hits.hits.forEach(function(obj){  // looping through elasticsearch
    new_titles.push({value: obj._source.title_id, label: obj._source.title_name})
})
this.setState({titleResults: new_titles})

后来我使用this.state.titleResults并将其传递到我的React-Select组件中：

<Select autofocus optionComponent={DropdownOptions} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state"  value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} />

这很好。但是现在我想在用户搜索我的React-Select componentOptions时传递与此标题相关的额外元数据。像这样：

我只是传递{value: obj._source.title_id, label: obj._source.title_name}，但是我想传递更多信息以供DropdownOption组件使用：

const DropdownOptions = React.createClass({
    propTypes: {
        children: React.PropTypes.node,
        className: React.PropTypes.string,
        isDisabled: React.PropTypes.bool,
        isFocused: React.PropTypes.bool,
        isSelected: React.PropTypes.bool,
        onFocus: React.PropTypes.func,
        onSelect: React.PropTypes.func,
        option: React.PropTypes.object.isRequired,
    },
    handleMouseDown (event) {
        event.preventDefault();
        event.stopPropagation();
        this.props.onSelect(this.props.option, event);
    },
    handleMouseEnter (event) {
        this.props.onFocus(this.props.option, event);
    },
    handleMouseMove …

我正在使用react-select，以便在我的网络应用中添加多选控件。http://jedwatson.github.io/react-select/ 我正在寻找一个将mobx可观察对象注入控件的好例子。我面临的第一个挑战是以异步方式初始化选项（从服务器获取选项，但此后我希望应用常规过滤，而无需使用异步选项）。有什么好的例子吗？

import Select from 'react-select';

<Select
      multi
      disabled={this.state.disabled}
      value={this.state.value}
      placeholder="Select your favourite(s)"
      options={this.state.options}
      onChange={this.handleSelectChange}
    />

我需要处理React Select下拉选项的样式.我通常使用CSS样式工作的方法是使用Chrome中的开发人员工具,指向页面上的元素并开始调整样式选项卡中的CSS属性,并查看元素如何更改.

样式React Select的下拉选项的问题在于选项仅在元素具有焦点时可见.当我打开开发者工具时,元素失去焦点,下拉消失!

有没有办法让我强制React Select显示下拉选项,而没有元素有焦点？

我在使用Material UI中的Input组件替换react-select v2的Input组件时遇到问题.

到目前为止,我已经在下面的代码框中进行了尝试,但是在键入输入时无法调用过滤？

https://codesandbox.io/s/jjjwoj3yz9

此外,任何有关选项替换实施的反馈都将受到赞赏.我是否以正确的方式抓住所单击选项的文本并从我的选项列表中搜索Option对象以传递给selectOption函数？

非常感谢,埃里克

我不确定如何将颜色从默认的蓝色更改为其他颜色。示例代码在下面的codeandbox链接中。我尝试更改root的样式，但没有成功。

https://codesandbox.io/s/ly87zo23kl