标签: react-select

我有像这样的依赖字段

    <List>
     <select>
      <option></option>
      <option></option>
     </select>
     <select>
      <option></option>
      <option></option>
     </select>
     <input />
   </List>

如果我有5个<List/>组件.如何将Select2添加到每个组件.我在网上搜索.但找不到任何有效的解决方案.

react-select下面的代码.获取错误TypeError:event.target是未定义的.

var React = require('react');
var ReactDOM = require('react-dom');
var Select = require('react-select');

var Page = React.createClass({

    getInitialState: function () {
        return {
            firstValue: ''
        }
    },

    handleFirstLevelChange : function (event) {
        this.setState({
            firstValue: event.target.value
        });
    },
    render : function(){

        var options = [
            { value: '', label: 'Select an option' },
            { value: 'one', label: 'One' },
            { …

我正在尝试使用redux创建一个异步react-select组件,但不知何故无法在下拉列表中获取搜索结果.对此非常陌生.请帮忙 :)

import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import Select from 'react-select';

import { fetchInstitutionsIfNeeded } from '../../actions/institutions';

class Signup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null
        };
        this.getInstitutions = this.getInstitutions.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange(input) {
        this.setState({
            value: input
        });
    }

    getInstitutions(input) {
        const { dispatch } = this.props;
        if (!input) {
            return Promise.resolve({ options: [] });
        }
        dispatch(fetchInstitutionsIfNeeded(input));
    }

    render() { …

我构建了自己的React select组件，并希望有一个选项可以将默认值设置为 disabled

该组件基本上如下所示：

<select
    id={this.props.id}
    name={this.props.name}
    value={this.props.value}
    defaultValue={this.props.default}
    onClick={this.handleFieldClick}
    onChange={this.handleFieldChange} >

         <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

         { Object.keys(this.props.options).map((val, i) => ( 
             <option key={i} value={val}>{this.props.options[val]}</option>
         ))}

 </select>

这行给我的问题是以下内容：

<option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

“ disabled”选项仍然是可选择的，并且呈现如下：

<option value="" selected="">Default Option</option>

我认为这是因为禁用选项的正确语法是<option disabled ></option>，而不是<option disabled="true" ></option>

但是当我格式化JSX时，如下所示：

<option value="" {this.defaultDisabled ? "disabled" : ""} >{this.props.defaultLabel}</option>

我收到一个使应用程序崩溃的错误。

有条件地使用JXS将指令值写入标记和/或有条件地在React中设置禁用选项的正确语法是什么？

我正在使用具有多选的React-Select组件.我面临的一个问题是,如果用户选择3或4个选项,则UI看起来非常糟糕,因为文本开始溢出并导致组件水平和垂直增长.

我希望有一个行为,其中组件的大小保持不变,如果用户选择更多选项,那么它只显示"..."(省略号)而不是尝试显示新选择的选项.

我想要的行为更内联这个组件

http://instructure-react.github.io/react-select-box/

了解它如何处理多选.

我现在不想换掉组件,因为我们已经使用React-Select进行了大量测试.

你能否给我一些如何在不删除react-select的情况下实现这一目标的指导方针.

我尝试实现异步react-select(Select.Async).问题是,我们想在redux-saga中进行提取.因此,如果用户键入内容,则应触发获取操作.然后佐贺取出记录并将它们保存到商店.这项工作到目前为止.不幸的是,loadOptions必须返回一个promise或者应该调用回调.由于新检索的选项通过更改属性进行传播,因此我看不到将Select.Async与saga一起使用来执行异步提取调用.有什么建议？

 <Select.Async
   multi={false}
   value={this.props.value}
   onChange={this.onChange}
   loadOptions={(searchTerm) =>  this.props.options.load(searchTerm)}
  />

我有一个hack,我将回调分配给一个类变量并在componentWillReceiveProps上解析它.那样丑陋,不能正常工作,所以我寻找更好的解决方案.

谢谢

如何设置自定义占位符元素？

当字段为空时，我想添加一个搜索图标

谢谢。

我正在研究使用react-select作为城市选择器的选择器,用户可以选择1个或多个城市来过滤一些数据.以下是我在页面中呈现的屏幕截图:

城市列表可能很大,如果一次选择大数字,我不希望选择器在其蓝色容器之外增长.以下是我现在模拟的情况:

我不是那个狂热的粉丝!我能想到的另一个选择是渲染"选择4个城市"而不是整个列表.这将在页面上具有可预测的大小.

怎么办react-select呢？

我有一个简单的 React 组件，它获得一个初始状态：

this.state = {
  currentObject: {
    isYounger: false
  }
}

然后我react-select用默认值渲染 a this.state.currentObject.isYounger：

    <Select
      name={"age"}
      value={this.state.currentObject.isYounger}
      onChange={newValue => this.addIsYoungerValue(newValue)}
      options={isYoungerOptions}
    />

由于某种原因，该值未设置。为什么是这样？

代码沙盒

版本：

"react-select": "^2.4.2",

我在我的代码中使用 react-select。https://www.npmjs.com/package/react-select

我想使用 classNames 设置下拉菜单的样式，以便我引用https://react-select.com/styles。react slect的DOM结构见链接。

如何使用 classNames 设置 react-select 的样式？

任何人都可以显示示例代码吗？

我已经完成了一些样式，正如您在这个沙箱上看到的那样，但我无法找出它的占位符文本。我不确定为什么会发生这种情况？

链接到 CodeSandbox：

https://codesandbox.io/s/nifty-rgb-ro8to?file=/src/components/Countries.js

export default function Countries({ formValues, setFormValues }) {
  const [data, setData] = useState([]);
  const [search, setSearch] = useState({ country: "" });
  const { register, handleSubmit } = useForm();

  // Fetch Data From Api
  useEffect(() => {
    const fetchData = () => {
      fetch("https://restcountries.eu/rest/v2/all")
        .then((res) => res.json())
        .then((result) => setData(result))
        .catch((err) => console.log("error"));
    };
    fetchData();
  }, []);

  const options = data.map((d) => ({
    label: d.name
  }));

  function handleChange(item) {
    setSearch(item);
  }

  function onSubmit(values) {
    setFormValues({
      ...formValues,
      ...values, …