Reactjs 错误选择基于反应挂钩和数字输入中的第一个选择

我有两个选择，我想填充react中第一个选择中的第二个选择基。当我选择一个国家时，我希望select2显示其状态，并且第二个select上的值用所选的值更新

我有以下代码

const MyForm = (props) => {    
    const COUNTRIES = [
        {
            displayValue: "Country1",
            value: "C1"
        },
        {
            displayValue: "Country2",
            value: "C2"
        }
    ]        
    const STATES = {
        "": [ {
            displayValue: "",
            value: ""
        }],
        "C1": [{
            displayValue: "State 1",
            value: "S11"
        },
        {
            displayValue: "State 2",
            value: "S12"
        }],
        "C2": [{
            displayValue: "State n1",
            value: "C21"
        },
        {
            displayValue: "STate n2",
            value: "C22"
        }]
    }    
    let inputsForms = {
      country: {
          elementType: 'select',
          elementConfig: {
              type: 'select',
              placeholder: '',
              options: COUNTRIES,
              firstOption: "-- Choose Country"
          },
          value: ''
      },
      states: {
        elementType: 'select',
        elementConfig: {
            type: 'select',
            placeholder: '',
            options: [], // I need these options depend on the countrie selected  STATES["C1"]
            firstOption: "-- Choose States"
        },
        value: ''
    }      
  }
        
  const [myForm, setmyForm] = useState(inputsForms);

  const updateObject = (oldObject, updatedProperties) => {
        return {
            ...oldObject,
            ...updatedProperties
        };
    };  
  
  const inputChangedHandler = (e, controlName) => {
    const countrieValue = controlName ==="country"?e.target.value:"";
    const stateOptions = myForm["states"].elementConfig;
    stateOptions["options"] = STATES[countrieValue];

      const updatedControls = updateObject(myForm, {
          [controlName]: updateObject(myForm[controlName], {
            value: e.target.value
          })
        });

        setmyForm(updatedControls);

  }


  const ElementsArray = [];
  for (let key in myForm) {
      ElementsArray.push({
          id: key,
          config: myForm[key]
      });
  }

  let form = (
      <form>
          {ElementsArray.map(el => (
              <Input 
              key={el.id}
              elementType={el.config.elementType}
              elementConfig={el.config.elementConfig}
              value={el.config.value}              
              changed={e => inputChangedHandler(e, el.id)}
              firstOption={el.config.firstOption}
          />
              ))}
          
      </form>
      
          );

  return(
        <div>
            {form}
        </div>
  );
}

export default MyForm;

选项在select2上收费，但是当我在第二个select上选择一个选项时，选项会消失，select2的值不会更新

---

谢谢。

由于每次输入更改都会调用inputChangeHandler，因此即使状态发生更改，数据也会重置。您可以检查contriveValue并设置状态数据，以便不重置数据

const inputChangedHandler=e，controlName=>{ const countrieValue=controlName==country？e.target.value:； if countrieValue{ const statepoptions=myForm[states].elementConfig； stateOptions[options]=状态[countrieValue]； const updatedControls=updateObjectmyForm{ [controlName]：更新对象MyForm[controlName]{ 价值：即目标价值 } }; setmyFormupdatedControls； }

---

} 您需要添加一种条件，以便在选择状态时更新状态，从而不影响原始国家/地区对象

const inputChangedHandler = (e, controlName) => {
  if (countrolName === 'states') {
    // your logic here
    return;
  }

  const countrieValue = controlName === 'country' ? e.target.value : '';
  const stateOptions = myForm['states'].elementConfig;
  stateOptions['options'] = STATES[countrieValue];

  const updatedControls = updateObject(myForm, {
    [controlName]: updateObject(myForm[controlName], {
      value: e.target.value,
    }),
  });

  setmyForm(updatedControls);
};

---

谢谢你的回答。关于错误的原因你是对的，你有什么建议来纠正它？我尝试了if countrieValue，但它不起作用。是的，你是对的，但我仍然不知道逻辑会是什么样子。你需要状态值，对吗？因此，您需要将其存储在react状态下作为setStatee.target.value。您是对的，解决方案是将值存储在状态Thaaanks中。