當 onChange() 中有函數調用時，React 的下拉菜單中未更新選定的下拉值

Question

我正在開發一個過濾器，它將根據用戶在下拉菜單中選擇的內容從 serviceNow 獲取數據。 在我的onChange() ，我有一個函數調用，它將根據onChange()返回的值過濾數據。 但是，一旦我調用函數（ handleFilter() ），結果就會正確獲取並顯示，但下拉菜單選擇不會更新。

這是我的下拉菜單片段

export default function DropDownComponent(props) {
  return (
    <div className="DropDownBox">
      <Select
        defaultValue={props.options[0]}
        isSearchable={false}
        name="DropDownBox"
        options={props.options}
        styles={dropDownStyles}
        autosize={false}
        onChange = {
          val => {
            props.changeDropdownValue(val);
            props.handleFilter(val)
          }
        }
      />
      <div className="caret_down_centered" />
    </div>
  );

props.handleFilter(val) 是防止在下拉列表中更新的函數調用。 如果我刪除它，那么下拉選擇會更新，但整個功能將變得無用，因為沒有進行過濾。

handleFilter(val)是一個父類方法，只是根據從onChange()傳遞的val值來調用不同的 API。 我不知道為什么它會干擾下拉菜單。

我讀到我們可以使用狀態並在每次選擇發生變化時更新狀態，但由於我有一個功能組件，我不確定這會如何進行。

我不確定這里是否需要 handleFilter() 代碼，因為它是一個很長的代碼，但如果需要，請告訴我。 我會把它貼在這里。

Answer 1

嘗試這個：

 const DropDownComponent = props => { return ( <select name="selectFieldName" value={props.value} onChange={props.handleChange} // rest... > <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> ) } class Parent extends React.Component { // initial setup constructor(props) { super(props) this.state = { value: 2 // Set your default value } } handleFilter = (value) => { // Here you fetch the data using 'value' argument console.log(value) } handleChange = e => { const value = e.target.value // update value this.setState({ value // no need to write 'value' because both have the same name }) // Call handleFilter passing selected "value" this.handleFilter(value) } render() { return ( <div> {/* Passing value and handleChange */} <DropDownComponent value={this.state.value} handleChange={this.handleChange} /> <p>Value {this.state.value}</p> </div> ) } } ReactDOM.render( <Parent / > , document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script> <div id="root"></div>

我猜你的問題是在錯誤的地方調用了handleFilter方法。 此外，您沒有說明如何在handleFilter方法中設置所選值。 例如，請參閱此 代碼沙盒。