首页 文章

onSubmit in对多个项目做出反应

提问于
浏览
0

我有一系列数据,其中每个项目都有一个表单,并且通过提交,必须显示“已提交”的文本,但问题是在提交一个项目的表单时,所有项目中的“已提交”文本是所示 . 我希望当我提交表单时,应该显示在受尊重项目中的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 回答

  • 0

    看起来您的索引不是唯一的 .

    for(var j = 0 ; j<lenfamilies; j++) {
      var index= i+j
      ...
      }
    

    i 来自 Map ,例如0,1,2 j 来自for循环,例如0,1,2,然后 index 是0, 1 ,2, 1 ,2, 3 ,2, 3 ,4

相关问题