React状態のネストされた値を更新します

Question

私はWebアプリケーションにReact/Reduxを使用しています。ユーザが説明を編集できる説明クラスがあります。小道具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 
});