defaultValueで選択入力を作成する

Question

私は奇妙な問題に直面しています。何が起こっているのか分かりません。前と全く同じコードを使用しましたが、今は違った動作をしています。たぶん私は何かを見落としているでしょう。私が欲しいもの：ここで私の質問の目的のために、私は3つのオプションで選択入力をレンダリングしたい。これらのオプションの1つは、無効なdefaultValueオプションです。これはプレースホルダとします。他の2つのオプションには値があり、selectにはそれを渡している状態の値があります。

私は（私はきれいな顔をしているために、ここで短いそれを維持しています）のような形式のレンダリングてるので：私は状態が定義されている

<Form 
    is_expenditure={this.state.is_expenditure} 
/> 

を、それが空です。それから私はそうのように私のフォーム要素を持っている：

class Form extends React.Component{ 
    render() { 
return (
    <div> 
    <form> 
     <select value={this.props.is_expenditure}> 
     <option disabled defaultValue>Ehne mehne Muh</option> 
     <option value="1">Test</option> 
     <option value="2">Test 2</option> 
     </select> 
    </form> 
    </div> 
) 
    } 
}; 

、コンポーネントは値= 1とオプションが事前に選択されているレンダリングしたときに。ブラウザでページを更新すると、select入力にはdefaultValueが突然現れます。しかし、私が最初にdevサーバを立ち上げて、フォームを見ると、それはあらかじめ選択された値を持っています...状態は間違いなく空です。誰かにアイデアはありますか？これは本当に面倒です。私はここでそれを短くしましたが、いくつかの選択入力があり、それらはすべて値= 1のオプションを事前に選択していました。奇妙なことは、それはオプションで「無効」の部分のように思えるEDIT

...はdefaultValueに変更ページで、私は値を第1の選択入力を変更し、他の選択入力という意志でしたそれがレンダリング時に選択されないようにします。私は以前これがうまくいったと確信しています。新しい反応バージョンではこれを禁止しましたか？回避策はありますか？私が望むのは、基本的にプレースホルダーで選択入力をすることだけです。

Answer 1

問題はdisabled小道具です。ブラウザはそのオプションを無視し、選択できないため、他のオプションがデフォルトで選択されています。状態にあなたの答えのための

class Form extends React.Component{ 
 
    render() { 
 
return (
 
    <div> 
 
    <form> 
 
     <select value={this.props.is_expenditure}> 
 
     <option defaultValue>Ehne mehne Muh</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     </select> 
 
    </form> 
 
    </div> 
 
) 
 
    } 
 
}; 
 

 
ReactDOM.render(<Form/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>