React select 下拉列表中的事件传播和多状态变化

Question

    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;

我所做的是，companies 数组中有 3 个嵌套数组。 companies 内的 jobs 和 job 内的 salary。输出如下所示：Output

Company 的 onChange 处理程序有效，它还会使用 handleChange 事件将 selectedCompany 的初始状态更改为我 select 中的任何一个。 onChange 触发 Jobs 根据 selected 公司进行更改。

现在，问题是我如何也更改 selectedJob 的初始状态？我为 Job 制作了另一个 handleChange2。如果我明确 select 工作，selectedJob 会改变它的价值，但我需要通过公司的变化来让它工作。

React 开发者工具显示 selectedJob 值只有在我手动 select 时才会改变。

综上所述，通过更改 Company 的状态来更改 selectedJob 的状态。

Answer 1

如果我对您的查询的理解正确，那么您想要更改 company，所选公司的第一份工作应设置为 selectedJob 状态。

你可以这样做，

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));
  };

Demo

注意：使用.map迭代array时需要添加key。查看您收到的警告并 key 相应地。

React select 下拉列表中的事件传播和多状态变化

Event propagation and multiple state change in react select dropdown

javascript

reactjs

react-select