从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 {

    constructor(props) {

      super(props)

      this.state = { 

        dropdownValue: null

      }

      this.onSelectValueChange = this.onSelectValueChange.bind(this)

    }

    onSelectValueChange (event) {

      this.setState({

        dropdownValue: event.target.value

      })

    }

    render() {

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

      return (

        <div>

          <select 

            onChange={this.onSelectValueChange}

            value={dropdownValue}

          >

            {

              uniqueArray.map(

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

              )

            }

          </select>

          {

            dropdownValue &&

            <div className={'lll'}>

              <Dashboard filter={dropdownValue} />

            </div>

          }

        </div>

      )

    }

}

export default ExportDropDown

Answer 2

您尝试将一个值返回到onChange不希望返回值的回调。仅render钩子的返回值将被呈现。

您可以将dropdown值保持在您的状态，并在render挂钩中决定要呈现的内容：

render() {

    const filterElem = this.createFilter();

    ...

    return (

       <div>

            Something

            ...

            { filterElem }

       </div>

    );

}

reload(event) {

    const { value: dropDownValue } = event.target;

    this.setState({ dropDownValue });

}

createFilter() {

    const { dropDownValue } = this.state;

    return dropDownValue ? <MyFilterComponent /> : null;

}

Answer 3

在选择标签中进行更改：

onChange= { (e) => { this.reload(e.target.value) } }