入力選択フォームの初期値を取得できません

Question

私はを使用しています。入力フィールドにを選択してください。一度クリックすると入力内で選択した値を取得する以外はすべて正常に動作します。また、（見出しに記載されているように）コードで設定されていますが、選択フィールドで初期値がポップアップするのを確認することができません。

render(){ 
    var Select = require('react-select'); 
    var options = [ 
     { value: '1', label: '1' }, 
     { value: '2', label: '2' } 
    ]; 

    function logChange(val) { 
     console.log(val); 
    } 
    return(

     <Select 
      name="form-field-name" 
      value="one" 
      options={options} 
      onChange={logChange} 
     /> 

    ); 

すべてのイベントはうまくいきます（私のconsole.logには表示されますが、画面上には何も変わりません）。

ここ

がをレンダリングにconsole.logとです（nullのが原因でXアイコン-明らかである）

Answer 1

ソースコードを読んだ後、私はあなたが渡しているかなり確信していますvalue小道具に間違った値。

expandValue

は options prop内側（ value propから）渡された値を見つけようと、それが失敗した場合、それは undefinedを返します。

for (var i = 0; i < options.length; i++) { 
    if (options[i][valueKey] === value) return options[i]; 
} 

あなたはオプションの配列に存在しない文字列「1」を、渡しています。

options[i][valueKey]の場合は、文字列「1」または「2」になります。 valueKey === 'value'なので、これはオプションのオブジェクト値プロパティから取得されます（ラベル内に同じ値がありますので、混乱する可能性があるので、これを強調したいと思います）。 私はわかりませんが、これは私への制御入力のようになります。

値を変更すると、あなたのコメントの質問に答えるトリックに

<Select 
    name="form-field-name" 
    value="1" 
    options={options} 
    onChange={logChange} /> 

を行う必要があります。選択値はvalueの値を使用するhidden inputの内部にあります。 は、私はあなたがこのような何かをしなければならないと思う：

class MySelect extends React.Component { 

    constructor(props) { 
     super(props) 

     this.state = { 
      value: "1" 
     } 

     this.handleChange.bind(this) 
    } 

    handleChange(selectedValue) { 
     this.setState({ value: selectedValue }) 
    } 

    render() { 
     return (
      <Select 
       name="form-field-name" 
       value={this.state.value} 
       options={options} 
       onChange={this.handleChange} /> 
     ) 
    } 
}