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在選擇時不顯示值

回答

相關問題