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

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

在我父母组件我有一个状态命名为：_SPCommandBarDisabled从另一个组件更新一个React的组件状态

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) } 
    ); 
    } 
}

而且从道具

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继承更新

在我的SPCommandBar组件我继承了_SPCommandBarDisabled prop并将其解析为状态。

在我SPCommandBar的render（）方法，我设置了参照国家启用值：

disabled: this.state._SPCommandBarDisabled

和更新家长状态的时候，孩子的状态似乎不是没得到更新。然而，指的是道具，而不是它是工作时的状态：

disabled: this.props.isDisabled

我不知道我刚刚解决我自己的问题，或者这是不它应该做的方式吗？原始的海报后

来源

2017-05-08 Nick Prozee

编辑找到了解决办法：

的构造函数只调用一次，当创建组件，当道具，你传递给组件的变化，构造函数不会再次调用，但而componentWillReceiveProps，你可以阅读更多here

原来的答案：

我认为错误是你用这个。道具，而不只是道具

尝试（这是在构造函数的定义传递）来改变这一点：

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

来源

2017-05-08 20:02:28 ospfranco

不，不幸的是，** _ ** SPCommandBarDisabled在SPCommandBar组件 –

不会改变啊，只是读取你的更新，的确，你做的不正确，你的组件构造函数只被调用一次，当它被创建时，如果道具改变，那么状态将不会被更新，你要找的是直接的使用道具（并且负责处理其余部分），或者在构造函数和componentWillReceiveProps中绑定它。 – ospfranco

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

回答

相关问题