Question

我的表格中有两个下拉菜单。除非在第一个下拉列表中选择了特定值，否则将禁用第二个下拉列表。

我们假设如果选择了第一个下拉列表的最后一个选项，它将被启用。但是，问题是：我的代码仅在下拉列表的值从其他值更改为所需的值时才起作用。初始渲染所需选项时，未启用第二个下拉列表（应该是）

What I have tried：因为我想要在第一次下拉的最后一个值最初渲染时启用第二个下拉列表，我尝试在setState中调用componentWillMount()，因为它发生在之前初始渲染。但是，由于确定是否应启用第二个下拉列表的逻辑基于dropdnw的值（dropdown_a_id）。它只发生在handleChange()之后，componentWillMount()之后调用，因此在componentWillMount()期间，dropdown_a_id是-1。我也是ComponentWillUpdate()但是，根据反应文件，我们不应该在这个事件中调用setState。

我需要帮助：如果最初呈现第一个下拉列表的具体值，我试图找到启用第二个下拉列表的方法。我相信应该有一个生命周期事件处理，但我不知道在这种特殊情况下哪一个。

export default class MyForm extends ApplicationComponent{
   constructor(){
       super()

       this.state = {
         formData: {
           dropdown_a__id: -1,
           dropdown_b_id: -1
         },
         firstDropdown: [],
         secondDropdown: [],
         disableTheDropDown: true
       }
   }

   getFirstDropDownData() {
       ajax({
          url: `someURL`,
          dataType: 'json',
          success: data => {
            this.setState({
               firstDropdown: data
            });
          },
          error: () => {
            console.log("Error")
          }
       })
   }

   getSecondDropDownData() {
       ajax({
          url: `someURL`,
          dataType: 'json',
          success: data => {
            this.setState({
               secondDropdown: data
            });
          },
          error: () => {
            console.log("Error")
          }
       })
   }

   componentWillMount() {
      this.getFirstDropDownData();
      this.getSecondDropDownData();
   }

   getFormData(form_id){
      ajax({
          url: `someURL/${form_id}.json`,
          dataType: 'json',
          success: data => {
            this.setState({
               formData: data
            });
          },
          error: () => {
            console.log("Error")
          }
       })
   }

   compionentWillReceiveProps(nextProps){
      if(this.props.form_id !== nextProps.form_id){
        this.getFormData(nextProps.form_id)
      }
   }

   handleChange(e) {  
     let newForm = {formData: this.state.formData}

     newForm = _.merge(newForm.formData, {[e.target.name]: e.target.value})

     let isLastChoiceSelected = newForm.dropdown_a__id == 9 ? false : true

     this.setState({
       denail: newDenial,
       disableNoRecordExistReason: DoesReasonExist
     })
   }

   render(){
      return(
         //Render the form
      )
   }

React：如果最初呈现其他下拉列表的值，则启用下拉列表

0 个答案: