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

代码：

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;

var React=require（'React'）；
var RecipeBox=require（'./RecipeBox.jsx'）；
var AddRecipe=React.createClass({
handleClick:函数（）{
RecipeBox.setState({
加：错
});
},
render:function（）{
返回(
X
添加配方
名称
成分
提交
);
}
});
module.exports=AddRecipe；

---

情况：

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

。

您不能这样做，请参见此处。

---

您必须使用parents/children组件来执行此操作，或者如果AddRecipe与RecipeBox没有关系，则使用类似于

的lib

然后您可以像这样使用observer模式，使用一个小型库，如：

在一些名为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;

如果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;

var RecipeBox=React.createClass({
render:function（）{
返回；
}
onAdd:function（）{
this.setState（{adding:false}）；
}
});
var React=要求（'React'）；
var RecipeBox=require（'./RecipeBox.jsx'）；
var AddRecipe=React.createClass({
render:function（）{
返回(
X
添加配方
名称
成分
提交
);
}
});
module.exports=AddRecipe；

您不应该直接从父组件更改子组件状态，因为这不是首选的反应方式。您可以将

adding

作为

prop

传递到

RecipeBox

组件，并在

RecipeBox

组件中设置

RecipeBox

状态的

component willreceiveprops

方法

如果出于某种原因确实需要（直接）执行此操作，您可以在

RecipeBox

组件上添加

ref

，如下所示：

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

this.recipeBox=ref}adding={this.state.adding}/>

---

然后，您可以从

AddRecipe

组件调用

this.recipeBox.setState（{…}）

。但请记住，这不是首选的反应方式。

同样，您不能将recipeBox的onAdd功能作为AddRecipe组件内的道具访问，因为它们不共享父子关系relationship@ShubhamKhatri他没有说，你怎么知道他们没有？无论如何，我还将添加一个支持任何对任何通信的示例answer@ShubhamKhatri此时此刻，他编辑的文章并未指出这两个组成部分之间的关系。根据问题中提供的最新信息，我支持我的回答。另请参阅本文