Javascript react select下拉列表中的事件传播和多状态更改 从“React”导入React； 类应用程序扩展了React.Component{ 状态={ 公司：[ { 名称：“公司1”， 工作：[ { 名称：“job1-1”， 薪金：[{初级：1234}，{高级：2345}，{中级：34566}] }, { 名称：“job1-2”， 薪金：[ { 初级：9876 }, { 高级：98777 }, { 中期：34566 } ] }, { 名称：“job1-3”， 薪金：[ { 初级：9446 }, { 高级：98947 }, { 中期：134566 } ] } ] }, { 名称：“公司2”， 工作：[ { 名称：“job2-1”， 薪金：[ {初级：3431234}， {高级：552345}， {mid:4434566} ] }, { 名称：“job2-2”， 薪金：[ { 初级：99876 }, { 高级：5698777 }, { 中期：4434566 } ] }, { 名称：“job3-3”， 薪金：[ { 初级：933446 }, { 高级：9338947 }, { 中期：1333456 } ] } ] } ], 所选公司：“公司1”， 所选作业：“作业1-1” }; handleChange=e=>{ this.setState（{selectedCompany:e.target.value}）； }; handleChange2=e=>{ this.setState（{selectedJob:e.target.value}）； }; 渲染=（）=>{ 让company=this.state.companys.filter（company=>{ return company.name==this.state.selectedCompany； }); 返回( 工作 {company[0].jobs.map（（sal，i）=>{ 返回{sal.name}； })} 公司 {this.state.companys.map（（company，i）=>{ 返回{company.name}； })} ); }; } 导出默认应用程序；

我所做的是，在

companys

数组中有3个嵌套数组<代码>工作内部

公司

和

工资

内部

工作

。输出如下所示：

Company

的onChange处理程序工作，它还将

selectedCompany

的初始状态更改为我使用handleChange事件选择的状态。onChange会触发作业根据所选公司进行更改

现在，问题是如何更改selectedJob的初始状态？我又换了一把工作。如果我明确地选择了job，那么selectedJob会改变它的价值，但我需要通过公司的变化使它正常工作

react developer工具显示，仅当我手动选择一个作业时，

selectedJob

值才会更改

---

总之，通过更改公司状态来更改

selectedJob

的状态。

如果我正确理解了您的查询，那么您希望更改

公司

，来自所选公司的第一份工单应设置为

selectedJob

处于状态

你可以这样做

    import React from "react";

    class App extends React.Component {
      state = {
        companies: [
          {
            name: "company1",
            jobs: [
              {
                name: "job1-1",
                salary: [{ junior: 1234 }, { senior: 2345 }, { mid: 34566 }]
              },
              {
                name: "job1-2",
                salary: [
                  {
                    junior: 9876
                  },
                  {
                    senior: 98777
                  },
                  {
                    mid: 34566
                  }
                ]
              },
              {
                name: "job1-3",
                salary: [
                  {
                    junior: 9446
                  },
                  {
                    senior: 98947
                  },
                  {
                    mid: 134566
                  }
                ]
              }
            ]
          },
          {
            name: "company2",
            jobs: [
              {
                name: "job2-1",
                salary: [
                  { junior: 343431234 },
                  { senior: 552345 },
                  { mid: 4434566 }
                ]
              },
              {
                name: "job2-2",
                salary: [
                  {
                    junior: 99876
                  },
                  {
                    senior: 5698777
                  },
                  {
                    mid: 4434566
                  }
                ]
              },
              {
                name: "job3-3",
                salary: [
                  {
                    junior: 933446
                  },
                  {
                    senior: 9338947
                  },
                  {
                    mid: 13334566
                  }
                ]
              }
            ]
          }
        ],
        selectedCompany: "company1",
        selectedJob: "job1-1"
      };

      handleChange = e => {
        this.setState({ selectedCompany: e.target.value });
      };

      handleChange2 = e => {
        this.setState({ selectedJob: e.target.value });
      };

      render = () => {
        let company = this.state.companies.filter(company => {
          return company.name === this.state.selectedCompany;
        });


        return (
          <div>
            jobs
            <select
              value={this.state.selectedJob}
              onChange={this.handleChange2.bind(this)}
            >
              {company[0].jobs.map((sal, i) => {
                return <option>{sal.name}</option>;
              })}
            </select>
            companies
            <select
              value={this.state.selectedCompany}
              onChange={this.handleChange.bind(this)}
            >
              {this.state.companies.map((company, i) => {
                return <option>{company.name}</option>;
              })}
            </select>
          </div>
        );
      };
    }

    export default App;

---

注意：使用

.map

迭代

数组

时，需要添加

键

。查看您收到的警告，并相应地按

键

。

最后，我如何将空值添加到选择下拉列表中，先生？空值意味着，您希望显示类似选择选项的内容？您应该在映射之前添加

选择

。意思是，如果我选择公司1，则作业下拉列表应显示“全部”选项，以便我可以获得所有工作的工资作为输出。让我们说所有选项而不是空。我想我找到了。我有一个条件，如果仅选择的状态不是“全部”，则基于状态更改。无论如何，谢谢你。

handleChange = e => {
  let company = this.state.companies.filter(company => {
    return company.name === e.target.value;
  });

  let selectedJob = company[0].jobs[0].name;  //This will get first job from selected company

  this.setState({ selectedCompany: e.target.value, selectedJob }, ()=> console.log(this.state.selectedJob));
  };