reactjs - 反应中的 Onsubmit(e,..,index) 形式

Question

我有一系列数据，其中每个项目都有一个表格。我尝试index在onSubmit事件中使用，当我for loop在控制台中检查索引时，它显示正确的索引，但是当我检查索引时

handleSubmitR=(e, DetailsRoom, index)=>{console.log(index)} 

它与 中的索引不同for loop。

例如，如果我在一项中有 3 个表单，则索引的结果for loop是

'01','02','03'

但onsubmit如果索引的结果是 **

'03','03','03'

有什么建议么？

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      resultEdit: {},
    };

    $.ajax({
      url:"/json.bc",
      type:"post",
      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 numF = i;
      var numS = j;
      var stingF = numF.toString();
      var stingS = numS.toString();
      var  index= stingF+stingS
      **////
       <!-----e.g. For two forms  the result of consol.log(index) = '00' and '01'----->
       /////**

      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)=>{
        ////
       <!-----but the result of consol.log(index) in this part for both form are '01'----->
       /////
    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'));

标签： reactjs