Javascript 在React js html输入文件表单中预填充图像字段?
除图像字段外,所有内容都已预填充。因此,我在当前图像标签上显示了图像。由于图像字段未预填充,因此填充图像已成为必需的,它显示您需要选择文件 下面是代码Javascript 在React js html输入文件表单中预填充图像字段?,javascript,reactjs,axios,Javascript,Reactjs,Axios,除图像字段外,所有内容都已预填充。因此,我在当前图像标签上显示了图像。由于图像字段未预填充,因此填充图像已成为必需的,它显示您需要选择文件 下面是代码 async handleImage(e, index) { if (["file"].includes(e.target.name)) { let file = [...this.props.registration]; cats[index][e.target.name] = e.target
async handleImage(e, index) {
if (["file"].includes(e.target.name)) {
let file = [...this.props.registration];
cats[index][e.target.name] = e.target.files[0];
await this.setState({
cats,
});
} else {
this.setState({ [e.target.name]: e.target.files[0] });
}
}
<div id="registration" className="modal">
<a href="# " rel="modal:close" className="float-right text-dark ">
<img src={cross} alt="Cross" style={{ height: "1.1em" }} />
</a>
<p className="mod" style={{ marginTop: "10px" }}>
{t("vehicle_registration").toUpperCase()}
</p>
<hr></hr>
<div className="file_upload" style={{ marginTop: "25px" }}>
<form onSubmit={this.props.submit1}>
{this.props.registration
.slice(0, 2)
.map((inputField, index) => (
<div className="row">
<div className="form-group">
<input
type="text"
name="category"
class="form-control "
hidden
value={(inputField.category = "Vehicle-registration")}
/>
</div>
<div className="form-group">
<select
name="sub_category"
class="form-control donn"
value={inputField.sub_category}
onChange={(e) => {
this.onChange(e, index);
}}
style={{ width: "220px" }}
>
<option value="" selected display hidden>
Select Category
</option>
<option value="Registration Documentation">
Registration Documentation
</option>
<option value="Plate Number Documentation">
Plate Number doc
</option>
</select>
</div>
<div class="form-group">
<input
type="file"
name="file"
defaultValue={inputField.file} // There it i tried to give default value but its not working
onChange={(e) => {
this.handleImage(e, index);
}}
class="form-control-file"
id="exampleFormControlFile1"
/>
</div>
</div>
))}
<div style={{ marginTop: "70px" }}>
<center>
<button
type="submit"
value="Get Data"
className="btn btn-login text-white font-weight-bolder boxx "
id="button1"
style={{
height: "40px",
fontSize: "13px",
width: "200px",
background: "rgba(183, 28, 28, 1)",
border: "none",
color: "white",
margin: "auto",
}}
>
SAVE
</button>
</center>
</div>
</form>
</div>
</div>
异步handleImage(e,索引){
如果([“文件”].includes(e.target.name)){
让file=[…this.props.registration];
cats[index][e.target.name]=e.target.files[0];
等待这一天({
猫,
});
}否则{
this.setState({[e.target.name]:e.target.files[0]});
}
}
{t(“车辆登记”).toUpperCase()}
{this.props.registration .slice(0,2) .map((输入字段,索引)=>( { 这一变化(e,索引); }} 样式={{width:“220px”} > 选择类别 登记文件 车牌号文件 { 这个.handleImage(e,索引); }} class=“表单控制文件” id=“exampleFormControlFile1” /> ))} 拯救 如果我正在填写表格,那么它会被更新 我希望用来自API的数据预先填充图像。填充图像应该是可选的。若用户并没有填充它,那个么相同的图像应该被更新 请帮我做这个 提前谢谢