javascript - 更新 React State 中的嵌套值

Question

我正在为我的网络应用程序使用 React/Redux，并且我有一个描述类，用户可以在其中编辑描述。 Prop 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 desc = Object.assign({}, this.state.description);
desc[name] = value;
this.setState({
  description: desc
});