反應選擇下拉列表中的事件傳播和多狀態更改

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個嵌套數組。 jobs內companies和salary里面job 。 輸出看起來像這樣： 輸出

Company的onChange處理程序正常工作，它也將selectedCompany的初始狀態更改為我使用handleChange事件選擇的任何狀態。 onChange觸發Jobs根據所選公司進行更改。

現在，問題是我如何也更改selectedJob的初始狀態？ 我為Job做了另一個handleChange2。 如果我明確選擇工作，則selectedJob會更改其值，但我需要僅通過Company的更改來使其工作。

react開發人員工具顯示，僅當我手動選擇一個時， selectedJob值才會更改。

總之，通過更改公司狀態來更改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));
  };

演示

注意：使用.map迭代array時，需要添加key 。 請查看您得到的警告並相應地key 。