如何將下拉值傳遞給狀態/獲取請求？ 反應

Question

嘿，在這里反應新手！

我正在嘗試使用下拉列表中的選擇/選項值，以便在獲取請求 { selectedOption } 中使用。

我不確定如何將 selectedOption 傳遞到我的主狀態/組件中以在 get 請求中使用。 有人能指出我正確的方向嗎？ <3

構造函數/狀態：

  public constructor(props) {

    super(props);
    this.state = {
      documents: [],
      selectedOption: null
    };

  }

獲取請求：

 public getDocuments() {

    axios
      .get("https://bpk.sharepoint.com/_api/search/query?querytext='Colour:" + this.state.selectedOption + "'&trimduplicates=true&rowsperpage=100&rowlimit=1000",
        { params:{},
          headers: { 'accept': 'application/json;odata=verbose' }
        })
      ....
 }

使成為：

 public render(): React.ReactElement<IKimProps> {

    let { documents, selectedOption } = this.state;

    return (

      <div className={ styles.kim }>

        <Selecter></Selecter>

        <br/><br/>

        {this.renderDocuments()}

      </div>

    );
  }

}

選擇器組件（不在主應用程序中，在主應用程序中有一個名為 <.Selecter.><./Selecter.> 的組件）：

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'red', label: 'red' },
  { value: 'blue', label: 'blue' },
  { value: 'green', label: 'green' }
];

class Selecter extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

export default Selecter; 

Answer 1

這里的問題是您正在設置Selecter的狀態，但從未將其冒泡到父類。 執行此操作的一般方法是通過傳遞給Selecter的prop來設置父狀態：

Parent.js ：

...
public setSelectedOption(selectedOption){
  this.setState({ selectedOption: selectedOption });
  // or this.setState({ selectedOption }); (whichever works)
}

public render(): React.ReactElement<IKimProps> {
  ...
  <Selecter onChange={this.setSelectedOption.bind(this)}></Selecter>
}

然后，處理Selecter.js傳遞的函數：

class Selecter extends React.Component {
  ...
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    if(this.props.onChange){
      this.props.onChange(selectedOption);
    }
  };
}