3
私は、次のコードのように、2 <select>持っている：それが最初にレンダリングされると指定した値が空のときに、なぜ反応しますか？<select>オプション
function FirstSelect(props) {
const list = props.list.map(item => {
return <option key={item.id} value={item.id}>{item.text}</option>
})
return <select size='8' onChange={props.onChange}>{list}</select>
}
function SecondSelect(props) {
console.log(props.value)
const list = props.list.map(item => {
return <option key={item.id} value={item.id}>{item.text}</option>
})
return <select size='8' onChange={props.onChange} value={props.value}>{list}</select>
}
class TwoSelect extends React.Component {
constructor() {
super()
this.state = {
firstList: [
{id: 'fitem1', text: 'fvalue1'},
{id: 'fitem2', text: 'fvalue2'}
],
secondList: [
{id: 'sitem1', text: 'svalue1'},
{id: 'sitem2', text: 'svalue2'}
],
selectedValue1: '',
selectedValue2: ''
}
}
render() {
return <div>
<FirstSelect list={this.state.firstList} onChange={(e)=>{this.firstListSelectionChanged(e.target.value)}} />
<div>selectedValue1: {this.state.selectedValue1}</div>
<SecondSelect list={this.state.secondList} value={this.state.selectedValue2} onChange={(e)=>{this.secondListSelectionChanged(e.target.value)}} />
<div>selectedValue2: {this.state.selectedValue2}</div>
</div>
}
firstListSelectionChanged(value) {
this.setState({
selectedValue1: value
})
}
secondListSelectionChanged(value) {
this.setState({
selectedValue2: value
})
}
}
ReactDOM.render(
<TwoSelect />,
document.getElementById('root')
);<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="root"></div>、何も奇妙ではありません。しかし、最初の<select>の項目を選択すると、Reactは2番目の<select>の最初の項目を強調表示し、onChangeイベントは発生せず、selectedValue2はまだ空の文字列です。したがって、第2の<select>の最初の項目をクリックしても、そのonChangeイベントは発生しません。
2番目の項目は、2番目の項目をクリックしてからクリックすると表示されます。<select>は、属性値が空のときにハイライト表示されません。
は私が
this.state = {
selectedValue1: null,
selectedValue2: null
}
を使用しようと思っていたようにそれは動作しますが、代わりにnullの空の文字列を使用することを推奨し続けて反応します！
私のコードで何が問題になっていますか？
を見つけることができますか？ – Scimonster
@Scimonsterコンソールを実行すると、空の文字列か未定義のいずれかが表示されます。未定義のほうが良いオプションのようです。 – Icepickle