上传输入图像反应

Question

我有一个用于创建带有图像的帖子的表单。我得到这个错误消息:未能设置'HTMLInputElement'上的'value'属性:这个输入元素接受一个文件名，它可能只能通过编程设置为空字符串。然而，在网上发现的一些帖子中，我看到他和我做着同样的事情。如果有人能帮我，那就太好了。提前谢谢。

const FormCreatePastry = () =>{
const [ nameProduct, setNameProduct ] = useState("");
const [ ingredient, setIngredient ] = useState("");
const [ imageUrl, setImageUrl ] = useState();
const [ price, setPrice ] = useState("");
const [ nameShopPastry, setNameShopPastry ] = useState("--Choisir une boutique--");
const [ controlForm, setControlForm ] = useState(false)
const handleChange = (e) =>{
const nameShop = e.target.value;
setNameShopPastry(nameShop);
}
const sendForm = (e) =>{
e.preventDefault();
createPastryService(nameProduct, ingredient, imageUrl, nameShopPastry, price)
}
const uploadImage = (e) =>{
const file = e.target.files;
setImageUrl(file)
}
const cancelForm = (e) =>{
e.preventDefault();
}
const cancelImage = (e) =>{
e.preventDefault();
setImageUrl(null)
}
const ErrorForm = () =>{
if (controlForm === true) {
return(
<>
<p>Veuillez remplir tous les champs!</p>
</>
)
}else{
return null
}
}

useEffect(()=>{
console.log(imageUrl)  
console.log(nameShopPastry)
if (nameProduct.length < 1 || ingredient.length < 1 || nameShopPastry === "--Choisir une boutique--" || price === "" || imageUrl === "" ) {
setControlForm(true)
}else{
setControlForm(false)
}
},[controlForm,nameShopPastry, ingredient, imageUrl, nameProduct, price])
return(
<form action="">
<label htmlFor="Nom du produit:">
Nom du produit:
<input type="text" value={nameProduct} onChange={(e)=>setNameProduct(e.target.value)} />
</label>
<label htmlFor="Ingrédients">
Ingrédients:
<input type="text" value={ingredient} onChange={(e)=>setIngredient(e.target.value)}/>
</label>
<label htmlFor="">
Prix:
<input type="text" value={price} onChange={(e)=>setPrice(e.target.value)} />
</label>
<label htmlFor="Image du produit">
Image du produit:
<input type="file" value={imageUrl} onChange={uploadImage}/>
<button onClick={cancelImage}>X</button>
</label>
<div>
<p>Sélectionner une boutique</p>
<select onChange={(e)=> handleChange(e)}>
<option value="--Choisir une boutique--">--Choisir une boutique--</option>
<option value="20">Pastry Paris </option>
<option value="23">Pastry Bordeaux</option>
</select>
</div>
<div>
<button disabled={controlForm} onClick={sendForm}>valider</button>
<button onClick={cancelForm}>annuler</button>
</div>
<ErrorForm />
</form>
)
}
export default FormCreatePastry;

Answer 1

在React中，<input type="file"/>始终是一个不受控制的组件，因为它的值只能由用户设置，而不能通过编程设置。你可以参考医生反应。

所以不要在有类型文件的输入上使用value props

<input type="file" onChange={uploadImage}/>