0

私は 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 -t [ babelify ] public/js/app.js -o public/js/bundle.js

結果：

ここに画像の説明を入力

問題 -ドロップダウンから何かを選択しようとすると、選択に値が表示されません。Select...ラベルが常に表示されます。

4

1 に答える 1

1

Select コンポーネントの値プロップが欠落しているようで、ドロップダウン オプションをクリックしたときに処理する onChange プロップも必要です。カスタム props を渡し、react-select ライブラリで使用されるカスタム関数を作成できるように、react-select ライブラリをラップする独自の 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} />

それはあなたが必要な場所にあなたを連れて行くはずです

于 2016-09-09T21:47:00.397 に答える