在React状态中更新嵌套值

Question

我正在使用React/Redux作为我的Web应用程序，并且具有用户可以编辑描述的描述类。道具description和propertyTypes来自AJAX调用。

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;

我想更新的形式，但每当onChange事件被激发，我无法更新状态，并输入字段不会改变。

我该如何处理这种情况。 任何帮助，将不胜感激。

谢谢。

Answer 1

这是我将如何在你的情况更新

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

输入元素不应该切换从控制失控（反之亦然） [https://facebook.github.io/react/docs/forms.html#controlled-components]]

Answer 2

你可以写这样的更新：

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