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

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;
}

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊
在選擇標(biāo)簽中進(jìn)行更改:
onChange= { (e) => { this.reload(e.target.value) } }
添加回答
舉報(bào)