React Select在选择时不显示值

我是新来的react-redux，我有两个问题。我使用eract选择加这样的：React Select在选择时不显示值

<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' } 
});

当我执行我的项目，我可以看到，在国家确实存在这些值，但不显示我的选择字段。对于第二种情况下，我使用终极版的形式作出反应，选择和我有以下方式实现：

<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} 
    />

来源

2017-03-28 user7334203

你的'onChange'动作是如何分派的？你的减速机是怎样的？ –

case SET_PORTFOLIO_ID： return userSettings .set（'currentPortfolioId'，action.payload.currentPortfolioId）;我的减速器就是这种情况。在onchange的第一个选择中，我发送操作portfolioSelector – user7334203

您将不得不向我们展示完整的代码堆栈。 Reducer，动作，分派这个动作，从这个“表单”组件中的商店注入数据，组件本身。你提供的代码看起来是正确的。 –

我刚刚处理了这个问题，我发现它有助于有点抽象的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-02 17:16:33

React Select在选择时不显示值

回答

相关问题