Javascript 选择“反应选择”时不显示该值

Javascript 选择“反应选择”时不显示该值,javascript,reactjs,react-select,Javascript,Reactjs,React Select,我对react redux是个新手,我有两个问题。我正在使用eract select plus,如下所示: <Select id="portf" options={opts} onChange={value => portfolioSelector(value)} placeholder="Select Portfolio" /> import React from 'react'

我对react redux是个新手,我有两个问题。我正在使用eract select plus,如下所示:

<Select
          id="portf"
          options={opts}
          onChange={value => portfolioSelector(value)}
          placeholder="Select Portfolio"
        />
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表单中使用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}
  />
props.input.onChange(值)}
onBlur={()=>props.input.onBlur(props.input.value)}
选项={props.options}
占位符={props.placeholder}
/>

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

<Select
          id="portf"
          options={opts}
          onChange={value => portfolioSelector(value)}
          placeholder="Select Portfolio"
        />
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;
然后将其嵌入到您的代码中

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
const ArtifactGenerator=({
//我的道具太棒了
}) => (
//有些人用div和{和js以及所有的爵士乐来反应redux
//你想要的任何其他groovy代码
);
//剩下的道具和导出代码或其他页面的内容

我不完全确定你想用你的
初始值做什么,我觉得语法不对,所以我只是写了一些我认为更可行的东西,但是你可以很容易地调整它以满足你的需要。希望这有帮助!

你的
onChange
操作是如何调度的?你的reduce操作是如何调度的er看起来像?case SET\u PORTFOLIO\u ID:return userSettings.SET('currentPortfolioId',action.payload.currentPortfolioId);我的reducer就是这样。在onchange中的第一个选择中,我分派操作PortfolioSelector,您必须向我们展示完整的代码堆栈。reducer,action,分派该操作,以此“形式”从存储注入数据组件,组件本身。您提供的代码看起来正确。恕我直言,我认为它与reducer无关。我可能会忘记在我的select组件中声明一些函数,然后您自己调试它。如果您显示的代码与我们无关,我们如何帮助呢?我要求提供更多代码,因为显然问题不存在我不在这儿。