2

我是 react-redux 的新手，我有两个问题。我正在使用 eract select plus，如下所示：

<Select
          id="portf"
          options={opts}
          onChange={value => portfolioSelector(value)}
          placeholder="Select Portfolio"
        />

但是，当我选择另一个值时，即使触发了该值，它也不会显示在该字段中。另一个问题是我想为我的选择器设置初始值，所以在我的容器中我写：

const initialValues = fromJS({
  market: { label: 'All', value: 'All' },
  prodType: { label: 'All', value: 'All' }
});

当我执行我的项目时，我可以看到在状态下这些值确实存在，但没有显示在我的选择字段中。对于第二种情况，我以 redux 形式使用 react-select，并通过以下方式实现它：

<Select
    {...props}
    value={props.input.value}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
4

1 回答 1

1

Select我刚刚处理了这个问题，我发现将它抽象成自己的组件很有帮助。为此，您可以制作一个ReactReduxSelect.jsx如下所示的组件 ( )：

import React from 'react';
import Select from 'react-select';
import style from 'react-select/dist/react-select.css';

// define portfolioSelector somehow
// or you could pass it as a property:
//     portfolioSelector: React.PropTypes.func

class ReactReduxSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Select
                name={this.props.name}
                value={this.state.selected}
                options={this.props.options}
                onChange={(value) => { 
                    this.setState({ selected: value });
                    portfolioSelector(value);
                }}
                placeholder={this.props.placeholder}
            />
        );
    }
}

ReactReduxSelect.propTypes = {
    name: React.PropTypes.string,
    placeholder: React.PropTypes.string,
    options: React.PropTypes.array
};

export default ReactReduxSelect;

以这种方式实现它的酷之处在于，它可以在原生 Redux 状态树中更新。因此，如果您返回要嵌入此控件（MyTotallySickReactReduxWebpage.jsx或其他任何内容）的页面，则可以导入组件...

import ReactReduxSelect from './ReactReduxSelect';

然后将其嵌入您的代码中...

const ArtifactGenerator = ({
    // my totally awesome props
}) => (
    // some react redux stuff w/ divs and { and js and all that jazz
    <ReactReduxSelect
        name="portf"
        options={[
             { label: 'Market', value: 'All' },
             { prodType: { label: 'ProdType', value: 'All' }
        ]}
        placeholder="Select Portfolio"
     />
     // whatever other groovy code you want in there
);

// the rest of your props and export code or whatever for the page

我不完全确定你在initialValues那里试图做什么，语法对我来说看起来不正确，所以我只是写了一些我认为更有可能工作的东西，但你可以很容易地调整它以适应您的需求。希望这可以帮助！

于 2017-06-02T17:16:33.703 回答