選択したときにReact Selectに値が表示されない

Question

私はreact-reduxを初めて使っています。私は2つの問題があります。私はエラクトセレクトプラスを使用しています：

<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の形でセレクト反応し、私は次のようにそれを実装している：私はちょうどこの問題に対処し、私はそれが参考に独自のコンポーネントに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} 
    /> 

Answer 1

。

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の状態ツリー内で更新することができるということである。これを行うには、次のようになりますコンポーネント（ReactReduxSelect.jsx）を行うことができます。ですから、このコントロール（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で何をしようとしていたのか全く分かりません。その構文は私にとっては正しいとは言えませんので、私は仕事をする可能性が高いと思っていますが、ニーズに合わせて調整してください。お役に立てれば！