[英]ReactJs select, no value displayed
我正在學習reactJs並嘗試使用react-select 。
的HTML:
<div class="col-md-2">
<div class="well">
<h1>h1</h1>
<div id="countriesSelect"></div>
<div id="exp"></div>
<!-- Scripts -->
<script src="/js/bundle.js"></script>
</div>
</div>
app.js:
var React = require('react');
var ReactDOM = require('react-dom');
var Select = require('react-select');
const getOptions = (input) => {
return fetch('//api.local/api/countries') //users/${input}.json
.then((response) => {
return response.json();
}).then((json) => {
var data = [];
json['data'].forEach(function(item) {
data.push({value:item.attributes.slug,label:item.attributes.title})
});
return { options: data };
});
}
ReactDOM.render(
<Select.Async
name="countries"
loadOptions={getOptions}
/>,
document.getElementById('countriesSelect')
);
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
ReactDOM.render(
<Select
name="form-field-name"
label
options={options}
/>,
document.getElementById('exp')
);
app.js到bundle.js-> browserify browserify -t [ babelify ] public/js/app.js -o public/js/bundle.js
結果:
問題- 嘗試從下拉列表中選擇某項時,select中未顯示任何值。 始終看到“ 選擇...”標簽。
看起來您缺少Select組件上的value屬性,並且在單擊下拉選項時也需要一個onChange屬性來處理。 我強烈建議您制作一個自己的選擇組件,該組件包裝react-select庫,以便您可以傳遞自定義prop並創建與react-select庫一起使用的自定義函數。
var value;
//初始化值變量
function updateValue(selectVal) { value = selectVal // update value variable to new value }
<Select name="form-field-name" label value=value // set value to value onChange= updateValue options={options} />
那應該帶你到需要的地方
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.