2017-01-26 1 views
2

Ich verwende React/Redux für meine Web-App und ich habe die Beschreibung-Klasse, wo Benutzer Beschreibung bearbeiten können. Requisiten description und propertyTypes kommen von AJAX-Anrufen.Aktualisiert geschachtelten Wert in React State

import React, { PropTypes } from 'react'; 
 

 
const defaultDescription = { 
 
    about_you: '', 
 
    benefits: '', 
 
    description: '', 
 
    headline: '', 
 
    no_of_guests: 0, 
 
    property_name: '', 
 
    property_type: { 
 
    id: 1, 
 
    name: 'Apartment', 
 
    }, 
 
}; 
 
class Description extends React.Component { 
 
    static propTypes = { 
 
    description: PropTypes.object, 
 
    propertyTypes: PropTypes.array, 
 
    }; 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     description: defaultDescription, 
 
    }; 
 
    this.handleInputChange = this.handleInputChange.bind(this); 
 
    this.propertyTypeChanged = this.propertyTypeChanged.bind(this); 
 
    this.updateDescription = this.updateDescription.bind(this); 
 
    } 
 
    // componentWillMount() { 
 
    // if (!this.props.description) { 
 
    //  this.setState({ 
 
    //  description: defaultDescription, 
 
    //  }); 
 
    // } 
 
    // } 
 
    componentWillReceiveProps(nextProps) { 
 
    if (nextProps && nextProps.description && nextProps.propertyTypes) { 
 
     const newDescription = nextProps.description.description ? merge(defaultDescription, nextProps.description) : merge(nextProps.description, defaultDescription); 
 
     this.setState({ 
 
     description: newDescription, 
 
     }); 
 
    } 
 
    } 
 
    handleInputChange(event) { 
 
    const target = event.target; 
 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
 
    const name = target.name; 
 
    this.setState({ 
 
     description[name]: value // <---- I want to update my state here 
 
    }); 
 
    } 
 
    updateDescription(event) { 
 
    event.preventDefault(); 
 
    console.log(this.state); 
 
    } 
 
    render() { 
 
    
 
    return (
 
     <form name="descriptionForm" onSubmit={this.updateDescription}> 
 
     
 
     <input name="no_of_guests" value={this.state.description.no_of_guests} onChange={this.handleInputChange} /><br /> 
 
     <input name="property_name" value={this.state.description.property_name} floatingLabelText="Property Name" onChange={this.handleInputChange} /><br /> 
 
     <input name="headline" value={this.state.description.headline} floatingLabelText="Headline" onChange={this.handleInputChange} /><br /> 
 
     <input name="summary" value={this.state.description.summary} floatingLabelText="Summary" onChange={this.handleInputChange} /><br /> 
 
     <input name="description" value={this.state.description.description} floatingLabelText="Description" onChange={this.handleInputChange} /><br /> 
 
     <input name="about_you" value={this.state.description.about_you} floatingLabelText="About You" onChange={this.handleInputChange} /><br /> 
 
     <input name="why" value={this.state.description.why} floatingLabelText="Why ?" onChange={this.handleInputChange} /><br /> 
 
     <input name="benefits" value={this.state.description.benefits} floatingLabelText="Benefits" onChange={this.handleInputChange} /><br /> 
 
     <button value="Save" type="submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 
export default Description;

Ich mag das Formular aktualisieren, aber wenn das onChange Ereignis ausgelöst wird, kann ich den Zustand nicht aktualisiert werden, und Eingabefeld nicht geändert wird.

Wie gehe ich mit diesem Fall. Jede Hilfe wäre willkommen.

Danke.

Antwort

3

Sie können das Update wie folgt schreiben:

const desc = Object.assign({}, this.state.description); 
desc[name] = value; 
this.setState({ 
    description: desc 
}); 
+1

Es ist wahrscheinlich erwähnenswert, dass [berechnete Eigenschaftennamen] (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_ Namen) sind eine ES2015-Funktion und werden in IE nicht unterstützt. Zugegeben, 99,9% der React Devs verwenden wahrscheinlich einen Transpiler und müssen sich deswegen nicht sorgen, aber immer noch :) –

+1

Und wenn es da 0.01% gibt, benutzt man keinen transpiler: 'var newState = {description: { }}; newState.description [Name] = Wert; this.setState (newState); ' –

+1

@Tholle, dem Sie direkt 'const desc = this.state.description' zuweisen. Es wird auf Ihr Objekt verweisen und mutieren. Es ist Anti-Pattern und sollte vermieden werden –

Verwandte Themen