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

Question

我正试图通过另一个组件更改我的一个组件的状态。请注意，我是 reactJs 的新手

在我的parents 组件 中，我有一个名为:_SPCommandBarDisabled

的状态

this.state = {
  _SPCommandBarDisabled: true
}

在子组件(SPSearchBox)中触发了改变_SPCommandBarDisabled状态的事件(日志显示状态是实际上改变了)

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

但是，在我的第二个 child (SPCommandBar 组件)中，该值没有更新。

这是来 self 的parents 组件

的代码

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 继承自 props

export interface ISPCommandBar {
    isDisabled: boolean;
}

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

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

Update

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

在我的 SPCommandBar 的 render() 方法中，我通过引用状态设置了 enabled 值:

disabled: this.state._SPCommandBarDisabled

并且在更新父状态时，子状态似乎没有得到更新。然而，当提到 Prop 而不是它正在工作的状态时:

disabled: this.props.isDisabled

我想知道我是否只是解决了我自己的问题，还是这不是应该做的事情？

Answer 1

在原始发布者找到解决方案后进行编辑:

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

原答案:

我认为错误是你在使用 this.props，而不仅仅是 props(在构造函数的定义中传递)

试着改变这个:

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