0

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

 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:

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

解决这个问题的任何想法？

4

2 回答 2

0

从受控变为不受控的输入组件通常意味着您<input>从拥有值变为存在undefined/null。这很可能在您的情况下删除 img 时发生。最简单的解决方法是在您的输入字段中添加一个保证值，以防您的状态为undefined.

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

这能解决您的问题吗？

于 2020-09-11T12:13:15.393 回答
0

如果你让我们知道你到底想要做什么，那就太好了：/还有一些更完整的代码（上面给出的代码，不起作用！！）

如果您正在尝试制作文件上传器，我建议您使用谷歌搜索类似

“如何使用反应挂钩进行文件上传”

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

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

它有一个很好的简单示例，可以创建文件输入并将其保存为带有反应钩子的状态。

于 2020-09-11T12:32:53.097 回答