繁体   English   中英

反应选择在Laravel-mix中没有显示价值

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM