如何更改另一个组件的状态？

Question

CODE：

var React = require('react'); 
var RecipeBox = require('./RecipeBox.jsx'); 
var AddRecipe = React.createClass({ 
    handleClick: function() { 
     RecipeBox.setState({ 
      adding: false 
     }); 
    }, 
    render: function() { 
     return (
      <div className="popUp"> 
       <button className = "btn btn-danger" onClick={this.handleClick}>X</button> 
       <h2>Add a Recipe</h2> 
       <form> 
        <h3>Name</h3> 
        <input></input> 
        <h3>Ingredients</h3> 
        <textarea></textarea> 
        <button type="submit" className="btn btn-success">Submit</button> 
       </form> 
      </div> 
     ); 
    } 
}); 

module.exports = AddRecipe; 

---

状况：

上述解决方案不起作用。我想从AddRecipe组件中为RecipeBox组件设置adding到false。

Answer 1

你不能那样做，请看这里how to communicate between components。 你必须使用父母/子女组件这样做，或者使用类似Redux

Answer 2

一个lib如果AddRecipe有RecipeBox没有关系

然后你可以使用像这样的观察者模式，使用一个小型图书馆像microevent：

例如在一些模块调用events.js：

var MicroEvent = require('./microevent.js'); 
module.exports = new Ticker(); 

在RecipeBox的文件：

var ticker = require('./events.js'); 

var RecipeBox = React.createClass({ 

    componentDidMount: function() { 
    this.addingHandler =() => this.setState({ adding: false }); 
    ticker.bind('adding', this.addingHandler); 
    }, 

    componentWillUnmount: function() { 
    ticker.unbind('adding', this.addingHandler); 
    } 

}); 

在AddRecipe的文件：

var React = require('react'); 
var RecipeBox = require('./RecipeBox.jsx'); 
var ticker = require('./events.js'); 

var AddRecipe = React.createClass({ 
    onAdd: function() { 
     ticker.trigger('adding'); 
    }, 
    render: function() { 
     return (
      <div className="popUp"> 
       <button className = "btn btn-danger" onClick={this.onAdd}>X</button> 
       <h2>Add a Recipe</h2> 
       <form> 
        <h3>Name</h3> 
        <input></input> 
        <h3>Ingredients</h3> 
        <textarea></textarea> 
        <button type="submit" className="btn btn-success">Submit</button> 
       </form> 
      </div> 
     ); 
    } 
}); 

module.exports = AddRecipe; 

如果RecipeBox是AddRecipe

的孩子你不应该试图改变RecipeBox的状态，这种方式。如果RecipeBox是AddRecipe一个子组件，那么你应该通过一个道具到它，而不是：

var React = require('react'); 
var RecipeBox = require('./RecipeBox.jsx'); 
var AddRecipe = React.createClass({ 
    handleClick: function() { 
     // you should only change your own state, see how 
     // we set 'adding' on RecipeBox on one of the last 
     // lines of render instead 
     this.setState({ 
      adding: false 
     }); 
    }, 
    render: function() { 
     return (
      <div className="popUp"> 
       <button className = "btn btn-danger" onClick={this.handleClick}>X</button> 
       <h2>Add a Recipe</h2> 
       <form> 
        <h3>Name</h3> 
        <input></input> 
        <h3>Ingredients</h3> 
        <textarea></textarea> 
        <button type="submit" className="btn btn-success">Submit</button> 
       </form> 
       <RecipeBox adding={this.state.adding}/> 
      </div> 
     ); 
    } 
}); 

module.exports = AddRecipe; 

如果AddRecipe是RecipeBox的孩子

如果RecipeBox是AddRecipe而不是父母，那么你应该传播adding: false高达RecipeBox像这样：

var RecipeBox = React.createClass({ 

    render: function() { 
    return <AddRecipe onAdd={this.onAdd.bind(this}/>; 
    } 

    onAdd: function() { 
    this.setState({ adding: false }); 
    } 

}); 

var React = require('react'); 
var RecipeBox = require('./RecipeBox.jsx'); 
var AddRecipe = React.createClass({ 
    render: function() { 
     return (
      <div className="popUp"> 
       <button className = "btn btn-danger" onClick={this.props.onAdd}>X</button> 
       <h2>Add a Recipe</h2> 
       <form> 
        <h3>Name</h3> 
        <input></input> 
        <h3>Ingredients</h3> 
        <textarea></textarea> 
        <button type="submit" className="btn btn-success">Submit</button> 
       </form> 
      </div> 
     ); 
    } 
}); 

module.exports = AddRecipe; 

Answer 3

你不应该可怕由于这不是优选的反应方式，因此可以从父级更改子组件状态。可以传递adding作为prop到RecipeBox组分和具有内部RecipeBox部件componentWillReceiveProps方法，其设置RecipeBox状态。

如果由于某些原因确实需要做的（直接），你可以像这样RecipeBox成分上添加ref：

<RecipeBox ref={(ref) => this.recipeBox = ref} adding={this.state.adding}/> 

而且比你可以从AddRecipe组件调用this.recipeBox.setState({...})。但请记住，这不是首选的反应方式。