Question

我有一个React表单。我正在使用react-dropdown依赖项。我有一个非常奇怪的问题。传递给下拉组件的onChange道具。当返回时，它会将下拉菜单中的值发送回父组件（在我的情况下为表单）。

有人会认为你可以通过this.setState（）获取该响应并将其设置为状态。

除非我以任何方式使用setState（），否则选择菜单的显示值将停止更改。它告诉我我的＃34;选择您的业务＆＃34;文本而不是选定的值。如果我删除了setState（），它就会改变。

什么.....？

Here is a trimmed down version of the component: 

import React from 'react';
import Dropdown from 'react-dropdown'
import FormInput from '../FormInput/FormInput'; 
import FormCheckbox from '../FormCheckbox/FormCheckbox'; 
import './RegistrationForm.css'
import 'react-dropdown/style.css'

export default class RegistrationForm extends React.Component {
    constructor(props) {
        super(props); 
        this.state={ 
            error_business_name: false,
            error_business_email: false,
            error_username: false, 
            error_password: false, 
            error_type: false, 
            error_terms: false, 
            error_policy: false, 
            email: null,
            business_name: null, 
            username: null, 
            password: null, 
            website: null, 
            terms: false 
        }
    }



    handleSelect(e) {
        console.log(e.value)
        this.setState({ type: e.value })
    }

    render() {

        return (
            <main role="main" className="RegistrationForm">
                <img alt="Simplr Logo" src={require("../../images/logo.png")} />
                <form onSubmit={e => this.handleSubmit(e)}>

                    <section className={this.state.error_type ? "error" : ""}>
                        <label htmlFor="type">Type of Business</label> 
                        <Dropdown 
                            className={this.state.error_type ? "dropdown error-dropdown" : "dropdown"} 
                            options={["Law Office", "Accounting Firm", "Construction"]} 
                            // onChange={e => this.setState({ type: e.value })} 
                            onChange={e => this.handleSelect(e)} 
                            placeholder="Select your Business" id="type"
                        />
                        <p className="error-message">Please select a valid business type</p>
                    </section>

                    <button>REGISTER</button>
                </form>
            </main>
        )
    }
}

在更改时调用handleSelect（）。如果我删除＆＃34; this.setState（{type：e.value}）＆＃34;从该方法，显示更改。但是，如果我把它放入，我仍然可以获得价值，但显示器然后不会改变默认值＆＃34;选择您的业务＆＃34;文本。该值设置为状态，但似乎没有为用户选择。

我不知道这两个进程是如何连接的。在我看来，一旦事情被发送到handleSelect（），下拉列表的工作就结束了。但显然，setState（）部分正在影响下拉列表。

帮助！

Answer 1

React下拉组件需要一个对象数组作为选项[{label：“”，value：“”}]

因此，不是传递字符串数组，而是传递一个对象数组，并将整个选定对象设置为状态，并将选定状态分配给Dropdown中的值。

react-dropdown - 如果调用setState，显示不会改变

1 个答案: