Reactjs: Wie mehrere Werte in einem Zustand zu binden, die mit können verschiedene Komponenten mit Attributen

Question

App-Komponente:

import React, { Component } from 'react';  
import './App.css';  
import { render } from 'react-dom';  
import {Router, Route} from 'react-router';  
import Form from 'react-router-form'  

class App extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
     companyName: '' 
     designation: '' 
     } 

     this.updateState = this.updateState.bind(this); 
    }; 

    updateState(e) { 

     this.setState({companyName: e.target.value}); 

     this.setState({designation: e.target.value}); 

    } 

    render() {  
    return ( 
     <div className="form-style-5"> 
     <h2>Register here</h2> 
     <form name="details" action="/hello"> 
      <Company nameProp={this.state.companyName} desiProp={this.state.designation} updateProp={this.updateState}/> 
      <Account/> 
      <input type="submit" name="submit" value="Submit" /> 
     </form> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default App; 

Firmen Komponente:

class Company extends Component { 
    render() { 
    return (
     <span> 
      <legend><p class="number">1</p>Company details</legend> 

      Company Name <input type="text" name="companyName" value={this.props.nameProp} onChange={this.props.updateProp}/> 

      Designation <input type="text" name="designation" value={this.props.desiProp} onChange={this.props.updateProp}/> 
     </span> 
    ); 
    } 
} 

Konto Komponente:

class Account extends Component {  
    render() {  
    return ( 
     <span>  
      <legend><p class="number">2</p>Account details</legend>  
      Name <input type="text" name="name"/> 
      Email <input type="email" name="email"/> 
      Login id <input type="text" name="loginId"/> 
      Password <input type="password" name="password"/> 
     </span> 
    ); 
    } 
} 

Ich muss alle Formularwerte auf der nächsten Seite verwenden. Also benutze ich State. Aber ein Wert ist bindend. Ich kann nicht mehrere Werte binden.

Answer 1

Wenn Sie einen setState ausführen, übergeben Sie das gesamte Objekt. Wie,

this.setState({companyName: "your value", designation: "your value"});