Aktualisiert geschachtelten Wert in React State

Question

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.

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.

Answer 1

Dies ist, wie ich in Ihrem Fall

const newState = {...this.state.description}; 
newState[name] = value; 
this.setState({ 
    description: newState, 
}); 

Eingabeelemente sollten nicht wechseln von unkontrollierte (oder umgekehrt) gesteuert aktualisieren würde [ [https://facebook.github.io/react/docs/forms.html#controlled-components]]

Answer 2

Sie können das Update wie folgt schreiben:

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