使用文件类型输入时，将控制更改为展开

如何解决使用文件类型输入时，将控制更改为展开

我为我的应用定义了多个状态，如下所示：

 const 
 [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''})

并且我使用如下输入从设备中获取图像：

 <Button variant='contained' color='primary' className={styler.buttons} name='headerpic' 
 >Header Pic
 <input type='file' value={state.headerpic } style= 
 {{width:'100%',height:'auto',opacity:'0',position:'absolute',top:'0px'}} onChange= 
 {(e)=>fileuploader(e)}></input>
 </Button>

我定义的文件上传器如下：

 const fileuploader=()=>{
 if (e.target.files && e.target.files[0]) {
      let img = e.target.files[0];
      console.log(URL.createObjectURL(img))
       setstate({
        
        headerpic: URL.createObjectURL(img)
        
         });
     
       } }

when i click on button and choose the desired pic i got below error:

一个组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息：

解决这个问题有什么主意吗？

解决方法

将输入分量从受控变为不可控制通常意味着<input>从具有值变为undefined/null。当您的情况下删除img时，很可能会发生这种情况。最简单的解决方法是在状态为undefined的情况下向输入字段添加保证值。

<input type='file' value={state.headerpic || ''} ... />

这可以解决您的问题吗？

如果您让我们知道您正在尝试做的是一件好事：/以及一些更完整的代码（上面给出的代码不起作用！）

如果您要制作文件上传器，建议您搜索类似的内容

“如何使用react hooks上传文件”

这是我之前发现的一个；）

https://www.educative.io/edpresso/file-upload-in-react

其中有一个很好的简单示例，它创建一个文件输入并使用react钩子将其保存为状态。