第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

從onchange方法調(diào)用后,React Function不返回組件

從onchange方法調(diào)用后,React Function不返回組件

三國紛爭 2021-05-22 18:06:24
當(dāng)在react-select組件上更改值時(shí),我正在調(diào)用“重新加載”功能??丶⑦M(jìn)入函數(shù),但不會(huì)從該函數(shù)返回組件。我試過從渲染調(diào)用該組件,然后調(diào)用該組件。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;
查看完整描述

3 回答

?
侃侃爾雅

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊

這是您的代碼的一些修復(fù)。請看一下以了解如何:

1-我們通過將選擇的輸入值保持在我們的狀態(tài)來對(duì)其進(jìn)行控制。(onSelectValueChange

2-我們的條件儀表板組件如何使用當(dāng)前選擇輸入值進(jìn)行渲染

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


查看完整回答
反對(duì) 回復(fù) 2021-05-27
?
呼啦一陣風(fēng)

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超6個(gè)贊

您嘗試將一個(gè)值返回到onChange不希望返回值的回調(diào)。僅render鉤子的返回值將被呈現(xiàn)。


您可以將dropdown值保持在您的狀態(tài),并在render掛鉤中決定要呈現(xiàn)的內(nèi)容:


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;

}


查看完整回答
反對(duì) 回復(fù) 2021-05-27
?
胡說叔叔

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

在選擇標(biāo)簽中進(jìn)行更改:

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


查看完整回答
反對(duì) 回復(fù) 2021-05-27
  • 3 回答
  • 0 關(guān)注
  • 294 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)