選択状態は、新たな選択オプションに

Question

OSを保持されていません前の選択されたオプション状態を表示する（戻る）。

ので

、次のコードを使用して：オプション「二」を選択しようとする

cont options = [ 
    { value: 'one', label: 'One' }, 
    { value: 'two', label: 'Two' } 
]; 

class funcName extends React.Component { 

render() { 

return (

logChange = (val) => { 
    console.log("Selected: " + val); 
} 

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

は保持されることはありません。直ちに選択が行われ、オプション「1」を選択すると表示され、（val）の表示値は常に「1」になります。 onChange行をコメントアウトすると、選択ボックスは期待どおりに機能します。

ここで問題は何ですか？

Answer 1

あなたの根本的な問題は、あなたが実際にあなたのコード内で何もしてコンポーネントを持っていないということですので、選択は、単に静的にレンダリングあなたが最初に設定した小道具。

アレックスによれば、選択コンポーネントに送信するvalue小道具を視覚的に更新するために更新する必要があります。非常に基本的なレベルでは、あなたの例では作成していない親コンポーネントでsetStateを呼び出し、その値を子Selectコンポーネントに渡します。私は完全な作業サンプルはこちらにコードを更新した

<Select 
    name="form-field-name" 
    value={this.state.selection.value} 
    options={options} 
    onChange={this.changeSelection} 
/> 

は：https://plnkr.co/edit/TlUe2eJd3OSxGkdHIKJP?p=preview

Answer 2

valueフィールドを指定すると、レンダリング関数が呼び出されるたびに値が再割り当てされます。代わりにdefaultValueを使用してください。

LE：制御されていないコンポーネント対制御について少し読んで価値があるかもしれません：https://facebook.github.io/react/docs/forms.html