ReactJs选择，没有显示任何值

Question

我正在学习反应并尝试使用react-select。

HTML：

hermitian matrix A

app.js：

<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 to bundle.js - ＆gt; 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') );

结果：

问题 - 尝试从下拉列表中选择某些内容时，select中没有显示任何值。始终可以看到选择... 标签。

Answer 1

看起来您缺少Select组件上的值prop，并且在单击下拉选项时还需要onChange prop来处理。我强烈建议您制作自己的选择组件来包装react-select库，这样您就可以传递自定义道具并创建与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} />

应该让你到达你需要的地方