Question

我正在尝试通过另一个组件更改其中一个组件的状态。请注意，我是reactJs的新手
在我的父母组件中，我的状态名为： _SPCommandBarDisabled

this.state = {
  _SPCommandBarDisabled: true
}

在子组件（ SPSearchBox ）中，触发事件以更改 _SPCommandBarDisabled 的状态（日志显示状态为实际上已经改变了）

public onSearchTextChanged(newText: any) {
this.setState({ _SPCommandBarDisabled: false },
  () => { console.log("New _SPCommandBarDisabled: " + this.state._SPCommandBarDisabled) }
);

但是，在我的第二个孩子（ SPCommandBar 组件）中，该值不会更新。

这是我的父母组件

中的代码

export default class StudentDocumentsHelper extends React.Component<IStudentDocumentsHelperProps, any> {
  constructor() {
    super();

    this.state = {
      _SPCommandBarDisabled: true
    }
    this.onSearchTextChanged = this.onSearchTextChanged.bind(this);
  }

  public render(): React.ReactElement<IStudentDocumentsHelperProps> {
    return (
      <div>
        <SPCommandBar isDisabled={this.state._SPCommandBarDisabled} />
        <SPSearchBox onTextChange={this.onSearchTextChanged} />
        <SPListView />
      </div>
    );
  }

  public onSearchTextChanged(newText: any) {
    this.setState({ _SPCommandBarDisabled: false },
      () => { console.log("New _SPCommandBarDisabled: " + this.state._SPCommandBarDisabled) }
    );
  }
}

SPCommandBar 继承自道具

export interface ISPCommandBar {
    isDisabled: boolean;
}

export class SPCommandBar extends React.Component<ISPCommandBar, any> {
    constructor(props: any) {
        super(props);

        this.state = {
            _SPCommandBarDisabled: this.props.isDisabled
        };
    }

更新

在我的 SPCommandBar 组件中，我继承了 _SPCommandBarDisabled 道具，并将其解析为状态。

在我的 SPCommandBar 的render（）方法中，我通过引用状态来设置启用值：

disabled: this.state._SPCommandBarDisabled

当更新父母状态时，孩子状态似乎没有得到更新。但是，当提到道具而不是它正在运行的状态时：

disabled: this.props.isDisabled

我想知道我是否只是解决了自己的问题，还是不应该如何解决？

Answer 1

在原始海报找到解决方案后编辑：

构造函数只调用一次，当创建组件时，当你传递给组件的props更改时，构造函数不会再被调用，而是componentWillReceiveProps，你可以阅读更多here < / p>

原始答案：

我认为错误是你正在使用this.props，而不仅仅是props（在构造函数的定义上传递）

尝试改变这一点：

this.state = {
    _SPCommandBarDisabled: props.isDisabled
};

从另一个更新一个React的组件状态

1 个答案: