Question

当react-select组件上的值更改时，我正在调用“ reload”功能。控件正在进入函数，但没有从该函数返回组件。我尝试从render调用组件，然后调用该组件。

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钩子的返回值。

您可以将下拉列表的值保持在您的状态，并在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

在选择标签中更改此内容：

class ProgressBar extends Component {
    constructor(props) {
        super(props);
        this.progressBar = React.createRef();
    }

    componentDidMount() {
        setInterval(() => {
            this.progressBar.current.style['width'] = (this.progressBar.current.offsetWidth + 1) + 'px';

            if(this.progressBar.current.offsetWidth > this.progressBar.current.parentNode.offsetWidth) {
                this.progressBar.current.style['width'] = 0;
                this.props.updateState(((this.props.currentProdId % 4 )) + 1);    //This is where I want to update state of the SalesBanner Component
            }
        }, 20);
    }

    render() {
        return(
            <OuterProgressBar>
                <InnerProgressBar ref={this.progressBar}/>
            </OuterProgressBar>
        );
    }
}

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

3 个答案: