Question

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

＆＃13;

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;

＆＃13;

我想更新表单但是每当onChange事件被触发时，我都无法更新状态，并且输入字段不会更改。

我该如何处理这个案子。任何帮助将不胜感激。

感谢。

Answer 1

您可以像这样编写更新：

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

Answer 2

这是我在你的案例中更新的方式

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

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

更新React State中的嵌套值

2 个答案: