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'));

反应中的onsubmit（e ..，index）形式

0 个答案: