Material UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制

Posted 2023-02-22

【中文标题】Material UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制

【英文标题】：Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled

【发布时间】：2019-08-21 02:29:22

【问题描述】：

我正在尝试更改 Select 输入的值，然后我在控制台中收到以下警告。

index.js:1446 警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

但我只是以正确的方式更新状态，这是我的代码

 <Select
        value=props.selectedService
        onChange=props.handleSelectChange
        inputProps=
          name: 'selectedService',            
        
   >
   <MenuItem value="">
     <em>None</em>
   </MenuItem>
   <MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
   <MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
   <MenuItem value="Rolling">Rolling</MenuItem>
 </Select>

handleselectchange 功能就在这里。

handleSelectChange = (target: name,value) =>  
  console.log(name);
  console.log(value); 
  this.setState( 
    serviceRequest:  
      selectedService: value 
     
  ); 

状态对象声明如下

state = 
    open: false,
    selectedDate: new Date(),
    selectedTime : new Date(),
    mailDetails :
      name:"",
      email:'',
      message:''
    ,
    serviceRequest: 
      name: '',
      email: '',
      mobileNumber:'',
      address:'',
      landMark:'',
      selectedService:''
  
;

谁能提出问题是什么？

【参考方案1】：

此处不受控制意味着您可能将 Select 组件的值设置为未定义， 这是因为value=props.selectedValue 在这里。在这种情况下，props 或 selectedValue 可能为 null，因此它是一个不受控制的组件。

要解决警告，您可以添加条件以检查 null 并设置默认值。

value=props.selectedValue ? props.selectedValue : " "

或者为了简单的语法使用空值合并运算符 (??)

value=props.selectedValue ?? " "

【讨论】：

这将产生一个问题：您必须控制您的输入，或使其成为受控组件。一般来说，根据我的个人经验，在 React 中，您希望尽可能避免受控输入。受控输入通常会将更详细的逻辑放入您的代码中，如果您不需要验证等额外功能，则它是冗余代码。此外，由于必须处理状态，受控组件的性能总是低于不受控制的组件。当您的表单中有很多字段时，这一点尤其明显。

@allicanseenow 我更喜欢在我的全局应用程序状态中拥有所有内容，以便在我“验证”时从中选择需要的任何内容。对于这个特定问题，我只是添加了一个默认值以避免undefined 步骤：const selectedValue = '' = props;

【参考方案2】：

与接受的答案相同，但检查未定义并使用无效合并运算符 (??) 提供默认值

value=props.selectedValue ?? ""

【讨论】：

您可以通过编辑来改进已接受的答案。

【参考方案3】：

你只能改变

value=props.selectedService 

到

value=props.selectedService ? props.selectedService : ""

---

 <Select
    ***value=props.selectedService ? props.selectedService : ""***
    onChange=props.handleSelectChange
    inputProps=
      name: 'selectedService',            
    
  >
   <MenuItem value="">
     <em>None</em>
   </MenuItem>
   <MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
   <MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
   <MenuItem value="Rolling">Rolling</MenuItem>
 </Select>