个人中心
gpt4 book ai didi

javascript - ReactJS 中选择输入的计数值

转载 作者：行者123 更新时间：2023-11-30 12:18:04 25 4
gpt4 key购买 nike

我无法弄清楚/概念化如何在 ReactJS 中创建组件。我拼凑了一个小例子，其中我有一个膳食计划的最重要组成部分，然后我有另一个组件用于计划中的每顿饭。

现在，我想要一个组件来显示用户选择膳食类别的次数。我在这里举了一个小例子。 Meal Plan Example

所以使用这个例子，我想要一个组件来总结用户当前选择了多少水果和蔬菜。我以前的想法是我需要在类别更改的某个地方更改计数，但我认为在 react 中这应该是不同的并且更容易，对吧？感觉也许我应该(以某种方式？)获取类别选择框的值并计算它们并将其呈现在新组件中。感觉也许我应该看看引用文档，但他们使用了一个非常简单的例子。

不太确定解决此问题的正确方法是什么。

这也是代码。

JSON

var plan = { 
    "meals": [
      {
        "selectedFood":"",
        "mealName":"breakfast"
      },
      {
        "selectedFood":"",
        "mealName":"lunch"
      },
      {      
        "selectedFood":"",
        "mealName":"dinner"
      },
    ],
    "planOptions": [
      {
        "id":1,
        "category":"fruit",
        "food":"apple"
      },
      {
        "id":2,
        "category":"fruit",
        "food":"pear"
      },
      {
        "id":3,
        "category":"vegetable",
        "food":"carrot"
      },
      {
        "id":4,
        "category":"vegetable",
        "food":"corn"
      }
    ]
};

JSX

var PlanEntryBox = React.createClass({
    getInitialState: function() {
        return {
            plan: {}
        };
    },
    render: function() {
    var planOpts = this.props.plan.planOptions;
    var meals = this.props.plan.meals.map(function(meal) {
            return (
                <MealEntryBox mealEntry={meal} planOptions={planOpts} />
            );
        });
        return (
        <div>
            <h1>Meals</h1>
                <table className="table">
           <thead>
             <tr>
               <th>Meal</th>
               <th>Category</th>
               <th>Food</th>
             </tr>
           </thead>
           <tbody>
             {meals}
           </tbody>
         </table>
         <CategoryCounter />
       </div>
        );
    }
});

var MealEntryBox = React.createClass({
    getInitialState: function() {
        return {
            selectedCategory: null
        };
    },
    categoryChange: function(event) {
        this.setState({selectedCategory: event.target.value});
    },
    render: function() {
        var options = _.uniq(_.pluck(this.props.planOptions, 'category'));
        var categoryOpts = options.map( function(category) {
            return (
                <option>{category}</option>
            );
        });

    var filteredOptions = _.filter(this.props.planOptions, {"category": this.state.selectedCategory});
        var foodOpts = filteredOptions.map( function(option) {
            return (
                <option>{option.food}</option>
            );
        });
        return (
     <tr>
             <td>{this.props.mealEntry.mealName}</td>
       <td>
             <select className="form-control" onChange={this.categoryChange}>
                 <option>Pick one... </option>
         {categoryOpts}
             </select>
       </td>

       <td>
             <select className="form-control" disabled={!this.state.selectedCategory}>
         {foodOpts}
             </select>
       </td>
     </tr>
        );
    }
});


var CategoryCounter = React.createClass({
  render: function() {
    return(
      <div>
        <h3>Counts</h3>
      </div>
    );
  }
});

React.render(
    <PlanEntryBox plan={plan} />,
    document.getElementById('content')
);

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Meal Plan Example</title>
</head>
<body>

  <div id="content">

  </div>

</body>
</html>

最佳答案

这是对组件 state 的相当直接的使用。

您需要在父组件(PlanEntryBox)中存储水果和蔬菜的数量。从更新 PlanEntryBox.getInitialState() 开始，为这些计数器添加字段。

getInitialState: function() {
    return {
        plan: {}, 
        fruitCount: 0,
        vegieCount: 0
    };
},

然后，向 PlanEntryBox 组件添加函数来处理更新计数:

addFruit: function(){
    this.setState({fruitCount: this.state.fruitCount++});
},
addVegie: function(){
    this.setState({vegieCount: this.state.vegieCount++});
}

(您也可能需要减少计数的方法，但我会把它留给您。)

然后将对这些方法的引用作为 Prop 传递给每个 MealEntryBox 组件。将 PlanEntryBox 行的 render 函数修改为:

<MealEntryBox mealEntry={meal} planOptions={planOpts}
    onFruit={this.addFruit} onVegie={this.addVegie}/>

然后在 MealEntryBox.categoryChange 中使用 onFruit 和 onVegie 回调:

categoryChange: function(event) {
    if(event.target.value === 'fruit'){
        this.props.onFruit();
    } else {
        this.props.onVegie();
    }

    this.setState({selectedCategory: event.target.value});
},

(注意:同样，这是一个天真的实现。如果用户取消选择餐点或将类型从一个类别更改为另一个类别，您将需要处理递减值。)

例如调用onFruit，将导致父组件更新其状态(使用addFruit()中的setState()调用) .这将导致 React 渲染组件，并将新的 props 传递给它的子元素。您可以通过将计数传递给 CategoryCounter 组件来利用这一事实。

在 PlanEntryBox 的主要 render() 函数中修改使用 CategoryCounter 的行，如下所示:

<CategoryCounter fruits={this.state.fruitCount} vegies={this.state.vegieCount} />

然后在 CategoryCounter 的渲染方法中，显示那些新的 Prop :

render: function() {
    <div>
        <h3>Counts</h3>
        <ul>
          <li>Fruits: {this.props.fruits}</li>
          <li>Vegetables: {this.props.vegies}</li>
        </ul>
    </div>
}

策略总结:

  • 在顶级组件中使用 state 存储计数
  • 将对回调函数的引用传递给子组件
  • 在回调方法中更新状态
  • 将当前状态作为 props 传递给 CategoryCounter，以便它可以显示计数
  • 依靠 React 在状态发生变化时重新渲染您的组件，这将导致将新 Prop 传递给 CategoryCounter，然后它也会重新渲染并显示其新 Prop 。

要进一步阅读回调和向组件树向上传递数据，请参阅 React 教程的第五步:https://facebook.github.io/react/docs/thinking-in-react.html#step-5-add-inverse-data-flow

关于javascript - ReactJS 中选择输入的计数值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31859353/

25 4 0
文章推荐： ios - 如果设置角半径则不会应用阴影
文章推荐： c# - LINQ 组一种类型的项目
文章推荐： Safari 浏览器中的 javascript 数组推送错误
文章推荐： ios - 我的标签栏 Controller 委托(delegate)出了什么问题？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com