如何更改另一個組件的狀態？

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({...})。但請記住，這不是首選的反應方式。