在reactJs中添加动态状态

您可以创建一个方法,onChange这需要在event与index那得到了改变该行,并使用name和value的input一种改变与组合index的row数组中找出更新的内容领域.

例

class Admins extends React.Component {
  state = {
    errors: "",
    success: "",
    rows: []
  };

  addRow = () => {
    this.setState(previousState => {
      return {
        rows: [...previousState.rows, { name: "", email: "", password: "" }]
      };
    });
  };

  removeRow = index => {
    this.setState(previousState => {
      const rows = [...previousState.rows];
      rows.splice(index, 1);
      return { rows };
    });
  };

  OnChange= (event, index) => {
    const { name, value } = event.target;

    this.setState(previousState => {
      const rows = [...previousState.rows];
      rows[index] = { ...rows[index], [name]: value };
      return { rows };
    });
  };

  render() {
    return (
      

        

          

            

              
Admins
            
          
        
        

          

            
              
Admins
            
            

              

                
{this.state.errors}
                
{this.state.success}
              
            
            

              

                

                  

                    

                  
                  

                    
                        {this.state.rows.map((row, index) => (
                          
                        ))}
                        

                      

                        

                          
Actions
                          
Name
                          
Email
                          
Password
                        
                      
                      

                            

                               this.removeRow(index)}
                                data-toggle="tooltip"
                                className="btn btn-xs btn-danger"
                                data-original-title=""
                              >
                                
                              
                            
                            

                               this.onChange(e, index)}
                              />
                            
                            

                               this.onChange(e, index)}
                              />
                            
                            

                               this.onChange(e, index)}
                              />
                            
                          

                          

                            
                              
                            
                          
                        
                      
                    
                  
                
              
            
          
        
      
    );
  }
}