Question

var A = React.createClass({
onTabChange:function(e, id){
    this.setState( {tabIndex:id} );
    //Inside this function I would like to get the state of B component 
    //to start from initial state, (i.e. call initialState() function)
},

render:function(){
    return <div>
        <FormTabs options={['A', 'B', 'C']} onChange={this.onTabChange} value={this.state.tabIndex} /> // This creates 3 simple tabs 
        <B x={5} y={8} z={10} />
    </div>;
}

}）;

var B = React.createClass({
getInitialState:function(){
    return {
        x: a,
        y: b,
        z: c
    }
},

render:function(){
    this.state.x = this.props.x;
    this.state.y = this.props.y;
    this.state.z = this.props.z;

    return <div>
            //...
        </div>
}

}）;

所以，我真正想要的是删除onTabChange函数中的B组件实例。有关如何删除它的实例的任何帮助，以便在我调用时，它进入B.initialState（）函数。

Answer 1

所以你问这个问题的方式有点令人困惑，但是如果我正确地理解你正在做的事情就是在使用B的getInitialState调用onTabChange函数时重新渲染B.一种方法是将x，y，z作为单个对象传递（即} {x：5，y：8，z：10}。然后在你的getInitialState中你可以检查是否设置了prop，如果它返回prop作为initialState，如果不返回abc。那么它看起来像：

var A = React.createClass({
onTabChange:function(e, id){
    this.setState( {tabIndex:id} );
    ReactDOM.render(<B />, document.getElementById("bContainer));
},

render:function(){
var values= {x:5,y:8,z:10};
return <div>
    <FormTabs options={['A', 'B', 'C']} onChange={this.onTabChange} value={this.state.tabIndex} /> // This creates 3 simple tabs 
    <div id="bContainer">
        <B values={values} />
    </div>
</div>;
}});

var B = React.createClass({
   getInitialState:function(){
      if (this.props.values !== undefined) {
          return this.props.values
      }
      return {
         x: a,
         y: b,
         z: c
       }
   },   

   render:function(){
      //this.state.x = this.props.x;
      //this.state.y = this.props.y;
      //this.state.z = this.props.z;

      return <div>
          //...
         </div>
      }
   };
});

然后你可以直接在B渲染中使用状态变量希望这会有所帮助。

如何将React组件重置为从父组件内部的初始状态开始

1 个答案: