从onchange方法调用后，React Function不返回组件

Question

当在react-select组件上更改值时，我正在调用“重新加载”功能。控件将进入函数，但不会从该函数返回组件。我试过从渲染调用该组件，然后调用该组件。

import React, { Component } from 'react';

import Select from 'react-select';

import removeDuplicates from '../../helpers.js';

import Dashboard from '../../containers/Dashboard';

class ExportDropDown extends Component {

    constructor() {

        super();

        this.state = { dropdown: null }

        this.reload = this.reload.bind(this);

    }

    reload(value) {

        console.log('val', value);

        const filter = (

            <div className={'lll'}>

                <Dashboard filter={'abc'} />

            </div>

        );

        return filter;

    }

    render() {

        const uniqueArray = removeDuplicates(this.props.data, 'Expert');

        return (

            <div>

                <select onChange={this.reload}>

                    {uniqueArray.map((d) => <option key={d.Expert} value={d.Expert}>{d.Expert}</option>)}

                </select>

            </div>

        );

    }

}

export default ExportDropDown;

Answer 1

这是您的代码的一些修复。请看一下以了解如何：1-我们通过将选择的输入值保持在我们的状态来对其进行控制。（onSelectValueChange）2-我们的条件仪表板组件如何使用当前选择输入值进行渲染import React, { Component } from 'react'import Select from 'react-select'import removeDuplicates from '../../helpers.js'import Dashboard from '../../containers/Dashboard'class ExportDropDown extends Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; super(props)&nbsp; &nbsp; &nbsp; this.state = {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; dropdownValue: null&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; this.onSelectValueChange = this.onSelectValueChange.bind(this)&nbsp; &nbsp; }&nbsp; &nbsp; onSelectValueChange (event) {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; dropdownValue: event.target.value&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; const uniqueArray = removeDuplicates(this.props.data, 'Expert')&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.onSelectValueChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={dropdownValue}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uniqueArray.map(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (d) => <option key={d.Expert} value={d.Expert}>{d.Expert}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dropdownValue &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={'lll'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Dashboard filter={dropdownValue} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default ExportDropDown

Answer 2

您尝试将一个值返回到onChange不希望返回值的回调。仅render钩子的返回值将被呈现。您可以将dropdown值保持在您的状态，并在render挂钩中决定要呈现的内容：render() {&nbsp; &nbsp; const filterElem = this.createFilter();&nbsp; &nbsp; ...&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Something&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { filterElem }&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; );}reload(event) {&nbsp; &nbsp; const { value: dropDownValue } = event.target;&nbsp; &nbsp; this.setState({ dropDownValue });}createFilter() {&nbsp; &nbsp; const { dropDownValue } = this.state;&nbsp; &nbsp; return dropDownValue ? <MyFilterComponent /> : null;}

Answer 3

在选择标签中进行更改：onChange=&nbsp;{&nbsp;(e)&nbsp;=>&nbsp;{&nbsp;this.reload(e.target.value)&nbsp;}&nbsp;}