[英]React-select doesn't show value in Laravel-mix
一個項目小組形式的學校在React中提供了一個前端,我們必須為此做一個后端。 我們決定與Laravel合作。 現在,除了一件事之外,一切都運行良好:下拉列表在我們的Laravel-mix應用程序中未顯示所選值,但在其React應用程序中卻顯示了所選值。 我們沒有更改下拉代碼中的任何內容,因此有人可以向我解釋為什么它現在不起作用嗎? 我對React的經驗不是很豐富,因此可以提供任何幫助。
這是代碼:
/* handleChange passes the selected dropdown item to the state. */
handleChange = (selectedOption) => {
this.setState({ selectedOption });
if (selectedOption) {
console.log(`Selected: ${selectedOption.label}`);
}
};
/* This render function, renders the grid, dropdown-menu, 'Add Item'-button
* and 'Reset Layout'-button. This is also where the createElement() function
* is called for each grid item.
*/
render() {
const { selectedOption } = this.state;
const value = selectedOption && selectedOption.value;
return (
<div>
<div className='widgetselecter'>
<Select className='dropdown'
name="form-field-name"
value={value}
onChange={this.handleChange}
options={[
{ value: 'one', label: 'One' },
{ value: 'Clock', label: 'Clock' },
{ value: 'Photo', label: 'Photo' },
{ value: 'Weather', label: 'Weather' },
]}
/>
<button className='addButton' onClick={this.onAddItem}>Add Item</button>
<button className='reset' onClick={this.onLayoutReset}>Reset Layout</button>
<span className='title'>/Dash</span>
</div>
<ResponsiveReactGridLayout
onLayoutChange={this.onLayoutChange}
onBreakPointChange={this.onBreakPointChange}
{...this.props}>
{_.map(this.state.items, el => this.createElement(el))}
</ResponsiveReactGridLayout>
</div>
);
}
}
我通過更改來修復它:
value={value}
至:
value={selectedOption}
並刪除:
const value = selectedOption && selectedOption.value;
因此它與https://github.com/JedWatson/react-select上的示例代碼匹配。
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.