onChange在react js编辑更新操作中没有更改输入字段。所有的值获取使用API php。但如果点击输入栏，输入一些不可编辑的单词，那么给出任何解决方案。可能是这个问题使用地图功能。如果可以不使用map函数
完整代码共享请向下滚动页面
输入图片描述
所有代码显示onChange输入字段在react js编辑更新操作中没有改变
import React,{useState, useEffect} from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';
//import './App.css';
const EditUser=()=>{
//function Home() {
// const navigate = useNavigate();
const {id} = useParams();
console.log(id);
// console.log("jjjjjj");
// alert(id);
const[titlecourse,settitlecourse]=useState("");
const[listshow,setlistshow]=useState("");
console.log(titlecourse);
const [userdata,setData]=useState ([]);
useEffect(()=>{
fetch(`https://www.example.com/jasonfile/wherecond.php?cid=${id}`).then((result)=>{
result.json().then((resp)=>{
// console.warn("result",resp)
console.log(resp)
setData(resp.data);
})
})
},[])
console.log(userdata);
// show array
return (
<div className="container">
<h1>Edit User {userdata.titlecourse}</h1>
<form >
{
userdata.map((item)=>
<div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">titlecourse </label>
<div class="col-sm-10">
<input type="text" class="form-control"
name = "titlecourse"
value={item.titlecourse}
//value={titlecourse}
//placeholder={item.titlecourse}
onChange={(e)=>{settitlecourse(e.target.value)}}
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">listshow</label>
<div class="col-sm-10">
<input type="text" class="form-control"
name = "listshow"
value={item.listshow}
onChange={(e)=>{setlistshow(e.target.value)}}
/>
</div>
</div>
</div>
)
}
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
);
}
export default EditUser;
所有代码显示onChange输入字段在react js编辑更新操作中没有更改值
输出显示在图像
输入图片描述
为了看到输入字段中的值变化，您需要将值prop设置为状态变量。
<div class="col-sm-10">
<input type="text" class="form-control"
name = "titlecourse"
value={titlecourse}
onChange={(e)=>{settitlecourse(e.target.value)}}
/>
</div>