一个项目组形式学校在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>
);
}
}
答案 0 :(得分:0)
我通过更改来修复它:
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}
/>
);