标签: react-select

我有一个无状态的 React 函数来将反应选择 Select 渲染到表单中。除了 redux-form 被重置之外，其他一切都可以很好地与 redux-form 配合使用。成功发布后我需要手动重置表单。

当 Select 值发生变化时，onChange 和 onBlur 会正确更改 redux-form 值。当我重置 redux-form 时，redux-form 值被清除，但 Select 将具有旧值。

function SelectInput(props) {
  const { input, options, label } = props;    
  const { onChange, onBlur } = input;

  const handleChange = ({ value }) => {
    onChange(value);
  };
  const handleBlur = ({ value }) => {
    onBlur(value);
  };    
  return (
    <FormField {...props}>
      <Select placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />
    </FormField>
  );
}

我将 SelectInput 转换为 React.PureComponent，并将该值添加为组件内的状态，并查找组件何时收到新的 props：

 constructor(props) { …

我想做一个基于w的不能删除的预选选项。无论是否拜访过客户，这都是我想要实现的目标

const { clients } = this.props.clients;

const listOfClients =
  clients !== null &&
  clients.clients.map(client => ({
    value: client._id,
    label: client.company
      ? client.company
      : client.lastname + " " + client.lastname,
    last_visit: client.last_visit,
    wilaya: client.wilaya,
    visited: client.visited // true : false
  }));

这就是我呈现我的选择选项的方式

<Select
          name="clients"
          isMulti
          value={this.state.clients}
          onChange={e => this.onChange(e, "clients")}
          isClearable={this.state.clients.some(client => !client.visited)}
          options={listOfClients || []}
          className="basic-multi-select"
          classNamePrefix="select"
        />

我的州拥有一系列客户，如下所示：

[{value: "5c0e784f0249ea83d88bddf3", label: "sarl medic", visited: true}]

如果 Visited = true ，则此选定选项必须呈灰色且无法删除。我查过这个例子，但我不明白我哪里出错了。谢谢 ：）

我在 ExpansionPanel(material-ui 的一个组件) 中使用了 react-select ，它使 ExpansionPanel 成为不需要的滚动。我该如何解决？我试图改变 z-index ，但没有奏效。考虑图片中的第三个选择，它的下拉菜单被 ExpansionPanel 隐藏了。先感谢您。

                <Select
                   value={state.selectedPerson}
                   onChange={handleMitarbeiterChange}
                   options={state.peopleOptions}
                   textFieldProps={{
                   label: 'Mitarbeiter',
                   id: "mitarbeiter-required",
                   InputLabelProps: {
                     shrink: true,
                   },
                 }}
                />

目前，我的脚本中有大量 HTML，滚动过去很难看，有没有一种方法可以生成从 2019 年到 1900 年的所有选项，然后循环它们？

            <select
              className='form--dob-year'
              name='year'
              onChange={onChange}
              value={year}
            >
              <option value='0'>Year</option>
              <option value='2019'>2019</option>
              <option value='2018'>2018</option>
              <option value='2017'>2017</option>
              <option value='2016'>2016</option>
              <option value='2015'>2015</option>
              <option value='2014'>2014</option>
              <option value='2013'>2013</option>
              <option value='2012'>2012</option>
              <option value='2011'>2011</option>
              <option value='2010'>2010</option>
              <option value='2009'>2009</option>
              <option value='2008'>2008</option>
              <option value='2007'>2007</option>
              <option value='2006'>2006</option>
              <option value='2005'>2005</option>
              <option value='2004'>2004</option>
              <option value='2003'>2003</option>
              <option value='2002'>2002</option>
              <option value='2001'>2001</option>
              <option value='2000'>2000</option>
              <option value='1999'>1999</option>
              <option value='1998'>1998</option>
              <option value='1997'>1997</option>
              <option value='1996'>1996</option>
              <option value='1995'>1995</option>
              <option value='1994'>1994</option>
              <option value='1993'>1993</option>
              <option value='1992'>1992</option>
              <option value='1991'>1991</option>
              <option value='1990'>1990</option>
              <option value='1989'>1989</option>
              <option value='1988'>1988</option>
              <option value='1987'>1987</option> …

我在用着react-select。当我从 select 中选择一个确定值时，我遇到了下一个问题

类型错误：无法读取未定义的属性“值”

另外，从减速器获取的值todoList没有显示，我看不到它们。

这是我的代码：

import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";

class SelectedTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTodo: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  bringTodos = () => {
    //WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
    return this.props.todoList.map(todo => {
      return (
        <option key={todo._id} value={todo._id}>
          {todo.name}
        </option>
      );
    });
  };

  handleChange = e => {
    this.setState({ selectedTodo: e.target.value });
  }; …

我想在 .txt 文件中设置禁用选项的文本（斜体等）样式react-select。尽管这对我来说似乎很基本，但我找不到任何相关内容。

禁用选项是否有自己的“样式键”？

我正在尝试设置 color: #aaa 当 .Select.is-disabled 为 true 时，但我无法覆盖 .Select-placeholder 样式，即 color: black;

.Select.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

.Select-placeholder {
  color: black !important;
}

React-select找不到React:TypeError:React is undefined1 react-select.js:826:4

React-select.js正在做出反应

var React = (window.React);

看起来我必须在html中包含React以使其工作,但我想避免这种情况.有什么我想念的吗？

(使用节点)