我有一系列数据,其中每个项目都有一个表单,并且通过提交,必须显示“已提交”的文本,但问题是在提交一个项目的表单时,所有项目中的“已提交”文本是所示 . 我希望当我提交表单时,应该显示在受尊重项目中的div的文本 . 我尝试在onSubmit事件中使用'index',当我在控制台中检查'for loop'的索引时它向我显示正确的index,但当我检查handleSubmitR =(e,DetailsRoom,index)=> {console.log(index)}的索引时,它与'for循环'中的索引不同,将显示所有提交的文本 .
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [],
resultEdit:{},
};
$.ajax({
url:"/json.bc",
type:"post",
data:{
cityid:"[##cms.form.cityid##]",
fdate:"[##cms.form.fdate##]",
tdate:"[##cms.form.tdate##]",
userid:"[##db.userid.userid##]",
},
success:(result)=>{
this.setState({data: eval(result)});
}
})
}
renderHotel(){
return this.state.data.sort((a, b) => a.total - b.total).map((item,i)=>{
return (
<div class="items">
{this.renderDetailsRoom(item,i)}
</div>
)
})
}
renderDetailsRoom(DetailsRoom,i){
let lenfamilies = DetailsRoom.families.length
var indents =[];
for(var j = 0 ;j <lenfamilies;j++){
var index= i+j
indents.push(<form method="post" key={index} action={this.renderAction(DetailsRoom)} onSubmit={e => this.handleSubmitR(e, DetailsRoom, index)}><div class="Result">{this.state.resultEdit[index]}</div></form>)
}
return(
indents
)
}
handleSubmitR=(e, DetailsRoom, index)=>{
console.log(index)
e.preventDefault();
return this.setState( prevState => ({
resultEdit: { ...prevState.resultEdit, [index]:'submitted'},
})) }
render() {
return (
<div>{this.renderHotel()}</div>);
}
}
ReactDOM.render(<App/>, document.getElementById('Result'));
1 回答
看起来您的索引不是唯一的 .
i 来自 Map ,例如0,1,2 j 来自for循环,例如0,1,2,然后 index 是0, 1 ,2, 1 ,2, 3 ,2, 3 ,4