javascript - 如何将下拉值传递给状态/获取请求？ react

Question

嘿，在这里 react 新手!

我正在尝试使用下拉列表中的选择/选项值，以便在获取请求 { 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 的状态，但从不冒泡到父类。执行此操作的一般方法是通过 prop传递给 Selecter设置父状态:
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);
    }
  };
}