React - State Update nur Wert von bestimmten Schlüssel

Question

Ich versuche mit React zu experimentieren, habe ich ein Problem der Aktualisierung der Statuswerte eines bestimmten Schlüssels.

Hier ist mein Zustand

this.state = { 
     connections : { 
      facebook : "http://facebook.com", 
      flickr : null, 
      foursquare : null, 
      googleplus : null, 
      id : 0, 
      instagram : "http://instagram.com/", 
      openstreetmap : null, 
      pinterest : null, 
      place_id : 1, 
      tomtom : null, 
      tripadvisor : null, 
      twitter : "http://twitter.com", 
      vimeo : null, 
      wikipedia : null, 
      yelp : null, 
      youtube : null 
     }, 
     contact : { 

     } 
    } 

Ich bin eine externe Komponente aufrufen und Parameter, um es zu senden.

<Connection type="Facebook" icon={facebookIcon} placeholder="Add Facebook Link" name="facebook" value={this.state.connections.facebook} onChange={this.handleChange.bind(this)}/> 
<Connection type="Twitter" icon={twitterIcon} placeholder="Add Twitter Link" name="twitter" value={this.state.connections.twitter} onChange={this.handleChange.bind(this)}/> 
<Connection type="Instagram" icon={instagramIcon} placeholder="Add Instagram Link" name="instagram" value={this.state.connections.instagram} onChange={this.handleChange.bind(this)}/> 

Komponente in externer Datei:

<input type="text" name={this.props.name} placeholder={this.state.placeholder} value={this.props.value} onChange={this.props.onChange} /> 

Auf Wertänderung in Textbox,

handleChange(e) {   
    this.setState({ 
     connections : {[e.target.name]: e.target.value} 
    }) 
} 

Während ich versuche, alle Feldwerte zu ändern, setzt er den Rest 2 mit leer. Wenn ich beispielsweise versuche, die Textbox von Facebook zu bearbeiten, werden die Werte für Twitter und Instagram auf leer gesetzt.

Darf ich wissen, was ich beim Einstellen von handleChange falsch mache? Ich bin sicher, es ist etwas falsch mit this.setState, aber nicht sicher, wie bestimmte Schlüsselwert Ziel.

Answer 1

In diesem Fall Sie vorherigen Zustand und neue erhalten müssen (merge heißt es können Sie Object.assign, Verbreitung Operator ... oder lodash merge verwenden) , weil setState,

Führt eine flache Zusammenführung von nextState in den aktuellen Status.

this.setState({  
    connections: Object.assign(
    {}, 
    this.state.connections, 
    { [e.target.name]: e.target.value } 
), 
    contact: {} 
}); 

Beispiel

class Connection extends React.Component { 
 
    render() { 
 
    return <input 
 
     type="text" 
 
     placeholder={this.props.placeholder} 
 
     name={this.props.name} 
 
     value={this.props.value} 
 
     onChange={this.props.onChange} /> 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    
 
    this.state = { 
 
     connections : { 
 
     facebook : "http://facebook.com", 
 
     flickr : null, 
 
     foursquare : null, 
 
     googleplus : null, 
 
     id : 0, 
 
     instagram : "http://instagram.com/", 
 
     openstreetmap : null, 
 
     pinterest : null, 
 
     place_id : 1, 
 
     tomtom : null, 
 
     tripadvisor : null, 
 
     twitter : "http://twitter.com", 
 
     vimeo : null, 
 
     wikipedia : null, 
 
     yelp : null, 
 
     youtube : null 
 
     }, 
 
     contact: {} 
 
    } 
 
    } 
 
    
 
    handleChange(e) {   
 
    
 
    
 
    this.setState({  
 
     connections: Object.assign(
 
     {}, 
 
     this.state.connections, 
 
     { [e.target.name]: e.target.value } 
 
    ), 
 
     contact: {} 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     
 
     <Connection 
 
      type="Facebook" 
 
      placeholder="Add Facebook Link" 
 
      name="facebook" 
 
      value={this.state.connections.facebook} 
 
      onChange={this.handleChange.bind(this)} 
 
     /> 
 
    
 
     <Connection 
 
      type="Twitter" 
 
      placeholder="Add Twitter Link" 
 
      name="twitter" 
 
      value={this.state.connections.twitter} 
 
      onChange={this.handleChange.bind(this)} 
 
     /> 
 

 
     <Connection 
 
      type="Instagram" 
 
      placeholder="Add Instagram Link" 
 
      name="instagram" 
 
      value={this.state.connections.instagram} 
 
      onChange={this.handleChange.bind(this)} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

Sie haben Recht, das Problem ist mit Ihrem SetState.

handleChange(e) {   
    this.setState({ 
     connections : {[e.target.name]: e.target.value} //this will trigger twitter and instagram with empty value. 
    }) 
} 

Eine einfache Abhilfe wäre:

handleChange(e) {   
    this.setState({ 
     connections : {[e.target.name]: e.target.value, twitter: 'initial val', instagram: 'initial val'} 
    }) 
} 

Answer 3

setState führt eine flache merge statt einer tiefen eine (weitere Erklärung in the docs), so dass Sie vollständig alle connections Überschreiben mit nur dein einziger Wert. Wenn Sie die anderen Tasten in connections intakt halten möchten, können Sie handleChange Um dies ändern:

handleChange(e) {   
    this.setState({ 
     connections : {...this.state.connections, [e.target.name]: e.target.value} 
    }) 
} 

Dies wird flache Kopie alle this.state.connections, und legen Sie e.target.name über oben drauf.