Question

我是新手做出反应。在我的react+flux+alt+ES6应用程序中，我有三个搜索操作属性。当我尝试设置默认值时，我遇到了错误。

动作：

 import alt from 'altInstance';
 import AttributeSectionWebAPIUtils from 'utils/AttributeSectionWebAPIUtils';

    class SearchActions {
      searchAttribute(data) {
         this.dispatch(data);
         AttributeSectionWebAPIUtils.search(data)
           .done(function success() {
              // We might not need to do anything it successfully added due to optimistic updates.
        })
        .fail(function failure() {
          // dispatch an event if fails to notify user that it has failed
        });
      }
    }

    export default alt.createActions(SearchActions);

商品

import SearchActions from 'actions/attributeSection/SearchActions';
import alt from 'altInstance';
   class AttributeSectionStore {
    constructor() {
    this.state = {
      obj: {
        attributeSectionId: '',
        name: '',
        description: ''
      }
    };
    this.bindListeners({
      handleSearch: SearchActions.SEARCHATTRIBUTE
    });
  }

  handleSearch(data) {
      this.emitChange(data);
      // otherwise, it is unchanged.
    }

}

export default alt.createStore（AttributeSectionStore，'AttributeSectionStore'）;

查看：

import React from 'react';
import { Input } from 'react-bootstrap';
import { ButtonToolbar } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import SearchActions from 'actions/attributeSection/SearchActions';
import AttributeSectionStore from 'stores/attributeSection/SearchStore';
// import styles from 'scss/_common';
/*
 * Code modified from https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/TopicTextInput.react.js
 */
export default class AttributeSectionSearch extends React.Component {
  static getPropsFromStores() {
    return AttributeSectionStore.getState();
  }

  searchAttribute = () => {
    SearchActions.searchAttribute();
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <h1>Attribute Sections</h1>
          <h3>Search Attribute Section</h3>
        </div>
        <div className="col-md-12">
          <div className="pull-right" >
            <Button bsStyle="primary">New</Button>
          </div>
        </div>
        <form className="form-horizontal">
         <div className="row">
          <div className="col-md-6">
            <Input type="text" label="Attribute Section ID" labelClassName="col-xs-3" wrapperClassName="col-xs-6" value={this.props.obj.attributeSectionId}/>
            <Input type="textarea" label="Description" labelClassName="col-xs-3" wrapperClassName="col-xs-6" value={this.props.obj.description}/>
          </div>
          <div className="col-md-6 form-group">
            <Input type="text" label="Name" labelClassName="col-xs-2" wrapperClassName="col-xs-6" value={this.props.obj.name}/>
          </div>
          </div>
          <div className="col-xs-2 col-xs-offset-10">
            <ButtonToolbar>
              <Button bsStyle="primary" onClick={this.searchAttribute}>Search</Button>
              <Button type="reset">Reset</Button>
            </ButtonToolbar>
          </div>
        </form>
      </div>
    );
  }
}

   AttributeSectionSearch.propTypes = {
      attributeSectionId: React.PropTypes.string,
      name: React.PropTypes.string,
      description: React.PropTypes.string
   };

我怎样才能获得道具的obj？

Answer 1

在alt中，getState()获取您在“this＆＃39;”下定义的所有对象。在你的构造函数中。

在您的情况下，您已在商店构造函数中定义了this.state 因此，在您的组件中，您应该访问this.props.state.obj。在反应中，这是一个令人困惑的名字。

最佳解决方案可能是改变构造函数中的代码：

this.state = {
  obj: {
    attributeSectionId: '',
    name: '',
    description: ''
  }

为：

this.obj = {
    attributeSectionId: '',
    name: '',
    description: ''
  }

然后您应该可以访问this.props.obj

道具中缺少obj - alt

1 个答案: