时间戳

首页 > 解决方案 > 如何识别同一个父组件渲染的同类型的每个子组件

reactjs - 如何识别同一个父组件渲染的同类型的每个子组件

问题描述

我对 React 很陌生，我无法弄清楚如何区分 2 个相同类型的不同子组件。

就我而言，我正在尝试构建一个应用程序，允许比较过去 5 年 2 种不同车型的价格。

我有 2 个 SelecComponent，在数据库中有汽车制造商作为选项，还有 2 个 SelecComponent，我需要在数据库中为每个选定的汽车制造商列出可用的汽车型号，所以前 2 个 SC 中的每一个都应该只控制一个存储汽车模型的 2 个 SC。

通常我会通过不同的 ID 识别 SelecComponent 并使用 jQuery 操作它们，但是在 React 中最好的方法是什么？

父组件：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      carProducers: [],
      carModels: [],
      selectedProducer: null,
      selectedModel: null
    }
  }


  //function to retrieve the carmakers in order to initialize the drop down elements in the page
  componentDidMount(){
    axios.get("/AutoExposed/API/carmakers.php")
    .then(response => {
      var data = response.data
      this.setState({
        carProducers: parseCarProducers(data)
      })
    })
    .catch(error => {
      console.log(error)
    })
  }

  //function to retrieve the car models once the car producer has been selected
  carProducerSelected1 = (selectedValue) =>{
    this.setState({selectedProducer: selectedValue}, () =>{
      axios.get("/AutoExposed/API/carmodels_GET.php?carmaker=" + this.state.selectedProducer.value)
      .then(response => {
        var data = response.data
        this.setState({
          carModels: parseCarModels(data)
        }) 
      })
      .catch(error => {
        console.log(error)
      })
    })   
  }

  carModelSelected = (selectedValue) => {
    this.setState({selectedModel: selectedValue}, ()=>{
      console.log(`The car model has just been selected: `, this.state.selectedModel.value)
    })
  }

  render(){
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carProducers} onOptionSelected={this.carProducerSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carProducers} onOptionSelected={this.carProducerSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
          </div>

          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
            <SelectComponent selectOptions={this.state.carModels} onOptionSelected={this.carModelSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">
              <SelectComponent selectOptions={this.state.carModels} onOptionSelected={this.carModelSelected}/>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-12 col-sm-12">

            </div>
          </div>

          <div className="row">
            <div className="col-lg-9 col-md-9 col-sm-12 col-sm-12">
              <ChartComp />
            </div>
          </div>
        </div>





      </div>
    );
  }

}

export default App;

子组件：

类 SelectComponent 扩展组件 { state = { selectedOtptionState: null, }

optionWasSelected = (selectedOption) => {

    this.setState({selectedOtptionState: selectedOption}, () => {
        this.props.onOptionSelected(this.state.selectedOtptionState)
    })
}

render() {
    return (
        <Select 
            value={this.state.selectedOtptionState}
            onChange={this.optionWasSelected}
            options = {this.props.selectOptions} 
        /> 

    );
}

} 导出默认选择组件；

标签： reactjscomponents

解决方案

您的设置是正确的。这里的不同之处在于思维过程的一些转变 - 使用 jQuery 之类的东西，您可以根据 ID 将事件连接到元素，然后通过事件直接更新它们，而响应您在渲染时连接事件处理程序，然后更新状态当事件被触发，然后以新状态重新渲染；

首先 - 因为你有两个不同的汽车/生产者，你需要每个的状态变量来存储两个不同的值和它们的模型（例如selectedMainProducer, selectedCompareProducer, mainCarModels, compareCarModels）。此外，在这种情况下，最好有单独的事件处理程序来区分使用哪个选择并设置适当的状态：

<SelectComponent onOptionSelected={this.onMainProducerSelected} ... />
...
<SelectComponent onOptionSelected={this.onCompareProducerSelected} ... />
...

然后将两个不同的值及其模型存储在您的状态中，例如：

onMainProducerSelected = (selectedValue) => {
  this.setState({
    selectedMainProducer: selectedValue,
  },() => {
    axios.get(api + this.state.selectedMainProducer.value).then(response => {
      var data = response.data
      this.setState({
        mainCarModels: parseCarModels(data), // <-- separate models
      });
    });
  });
}

onCompareProducerSelected = (selectedValue) => {
  this.setState({
    selectedCompareProducer: selectedValue,
  },() => {
    axios.get(api + this.state.selectedCompareProducer.value).then(response => {
      var data = response.data
      this.setState({
        compareCarModels: parseCarModels(data), // <-- separate models
      });
    });
  });
}

有了这个，你就可以根据你的selectedMainProducer和selectedCompareProducer状态来渲染你的次要选择。

例如

<SelectComponent selectOptions={this.state.mainCarModels} ... />
...
<SelectComponent selectOptions={this.state.compareCarModels} ... />
...

推荐阅读