bugfix> javascript > 投稿

Reactフォームがあります。反応ドロップダウン依存関係を使用しています。私は非常に奇妙な問題を抱えています。ドロップダウンコンポーネントに渡されるonChangeプロップがあります。が返されると、ドロップダウンメニューから親コンポーネント(この場合はフォーム)に値を送信します。

その応答を受け取り、this.setState()を介してその値を状態に設定できると考えます。

何らかの方法でsetState()を使用する場合を除き、選択メニューの表示値は変更を停止します。選択した値ではなく、「Select your Business」テキストが表示されます。 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()は変更時に呼び出されます。そのメソッドから「this.setState({type:e.value})」を削除すると、表示が変わります。しかし、入れても値は取得できますが、表示はデフォルトの「Select your Business」テキストから変わりません。値は状態に設定されますが、ユーザーには選択されていないように見えます。

これら2つのプロセスがどのように接続されているのか、私にはわかりません。私の考えでは、処理がhandleSelect()に送られると、ドロップダウンの仕事は終わりました。しかし、明らかに、setState()部分がドロップダウンに影響を与えています。

助けて!

回答 1 件
  • Reactドロップダウンコンポーネントには、オプションとしてオブジェクトの配列が必要です[{label: ""、value: ""}]

    したがって、文字列配列を渡す代わりに、オブジェクトの配列を渡し、選択したオブジェクト全体を状態として設定し、選択した状態をドロップダウンの値に割り当てます。

あなたの答え