子组件无法触发状态更改

新鲜的5447

简单的反应状态示例。父组件是App,它最初只是显示一个按钮,单击该按钮时它应该呈现AllRecipes(这可以正常工作,并且我能够管理AllRecipes的状态)。内部AllRecipes是一个需要触发状态更改然后进一步渲染的ingredients按钮(单击该按钮时不执行任何操作,它需要切换配料的状态)。我认为这是一个关于如何管理状态的非常好的小例子,但我缺少一些东西。

var App = React.createClass({

    getInitialState: function(){
        return {showIngredients: false, showRecipes: false};
    },

    toggleRecipes: function(){
        this.setState({showRecipes: !this.state.showRecipes})
    },

    toggleIngredients: function(){
        this.setState({showRecipes: !this.state.showRecipes})
    },

  render: function() {
        var recipes = this.state.showRecipes ? <Recipes/> : null;
        return (
                <div>
                    <h1> Recipe App </h1>
                        <button onClick={this.toggleRecipes}> Show Recipes </button>

                        {recipes}
                </div>
            );
    }
});

var Recipes = React.createClass({
    render: function() {
        var ingredients = this.props.showIngredients ? <Ingredients/> : null;
        return (
                <div>
                    <h1> list of recipes </h1>
                        <ul>
                            <li> Chicken Soup </li>
                            <li> Chicken Wings </li>
                            <button onClick={this.props.toggleIngredients}> Show Recipes </button>
                            {ingredients}
                        </ul>
                </div>

            );
    }
});

var Ingredients = React.createClass({
    render: function() {
        return (
                <div>
                    <h1> List of Ingredients </h1>
                        <ul>
                            <li> Salt </li>
                            <li> Pepper </li>
                        </ul>
                </div>
            );
    }
});

React.render(<App/>, document.body);
费利斯

它看起来像你不及格toggleIngredientsRecipes尝试改变

var recipes = this.state.showRecipes ? <Recipes/> : null;

var recipes = this.state.showRecipes ? <Recipes toggleIngredients={this.toggleIngredients} /> : null;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更新URL而不触发状态更改

来自分类Dev

如何使用react-router触发状态更改?

来自分类Dev

在React中重新渲染子组件或更改子状态

来自分类Dev

通过其同级触发状态更改时,子组件不会重新呈现

来自分类Dev

从动态创建的子组件更改状态-React

来自分类Dev

如果父状态值更改,如何更新子组件

来自分类Dev

ReactJS:更改子组件的状态

来自分类Dev

带窗口的Kafka Streams拓扑不会触发状态更改

来自分类Dev

当父状态在React中更改时停止渲染子组件

来自分类Dev

React-无法使用容器组件中定义的功能更改子组件的状态

来自分类Dev

从React中的子组件更改父状态(无Redux)

来自分类Dev

子组件更新时更改父状态

来自分类Dev

Reactjs状态更改不会传播到动态创建的子组件

来自分类Dev

角度:@Input更改未在子组件中触发

来自分类Dev

如何在Reactjs中从另一个组件触发状态

来自分类Dev

如何从功能组件的父级更改子状态组件

来自分类Dev

如果我有一个按钮在React中的第二个子级中触发状态,如何将状态传递给父级组件

来自分类Dev

useEffect不是由子组件的ref.current更改触发的

来自分类Dev

子组件在每个状态更改时都重新呈现

来自分类Dev

子组件更改时刷新应用程序状态

来自分类Dev

从子组件更改父组件中的状态,然后将该状态作为属性传递,并在子组件中更改状态

来自分类Dev

React:子组件未在父状态更改时呈现

来自分类Dev

响应子组件在父状态更改后不更新

来自分类Dev

React-redux:无法在父状态更改时触发子组件操作

来自分类Dev

子组件之间的通信 - 触发和更改

来自分类Dev

转发状态 vs 转发道具到子组件

来自分类Dev

触发状态“selectedOptions2”时如何映射()

来自分类Dev

父状态更改时子组件不会更新

来自分类Dev

状态更改后子组件未更新

Related 相关文章

  1. 1

    更新URL而不触发状态更改

  2. 2

    如何使用react-router触发状态更改?

  3. 3

    在React中重新渲染子组件或更改子状态

  4. 4

    通过其同级触发状态更改时,子组件不会重新呈现

  5. 5

    从动态创建的子组件更改状态-React

  6. 6

    如果父状态值更改,如何更新子组件

  7. 7

    ReactJS:更改子组件的状态

  8. 8

    带窗口的Kafka Streams拓扑不会触发状态更改

  9. 9

    当父状态在React中更改时停止渲染子组件

  10. 10

    React-无法使用容器组件中定义的功能更改子组件的状态

  11. 11

    从React中的子组件更改父状态(无Redux)

  12. 12

    子组件更新时更改父状态

  13. 13

    Reactjs状态更改不会传播到动态创建的子组件

  14. 14

    角度:@Input更改未在子组件中触发

  15. 15

    如何在Reactjs中从另一个组件触发状态

  16. 16

    如何从功能组件的父级更改子状态组件

  17. 17

    如果我有一个按钮在React中的第二个子级中触发状态,如何将状态传递给父级组件

  18. 18

    useEffect不是由子组件的ref.current更改触发的

  19. 19

    子组件在每个状态更改时都重新呈现

  20. 20

    子组件更改时刷新应用程序状态

  21. 21

    从子组件更改父组件中的状态,然后将该状态作为属性传递,并在子组件中更改状态

  22. 22

    React:子组件未在父状态更改时呈现

  23. 23

    响应子组件在父状态更改后不更新

  24. 24

    React-redux:无法在父状态更改时触发子组件操作

  25. 25

    子组件之间的通信 - 触发和更改

  26. 26

    转发状态 vs 转发道具到子组件

  27. 27

    触发状态“selectedOptions2”时如何映射()

  28. 28

    父状态更改时子组件不会更新

  29. 29

    状态更改后子组件未更新

热门标签

归档