根据ReactJS中的变量有条件地设置复选框状态

凯尔
class Example extends React.Component {
  constructor() {
    super();
    this.isChecked = this.isChecked.bind(this);
  }

  isChecked(ex){
    return this.props.defaults && $.inArray(ex, this.props.defaults);
  }

  render() {
    return (
      <div className="example">
        {this.props.items.map(item => (
          var checked = this.isChecked({item.type});

          <span key={item.type}>
            <input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        ))}
      </div>
    );
  }
}

在上面的示例中,我已将一个项目列表传递给了该组件this.props.items并向其传递了defaults列表this.props.defaults对于每个项目,如果该项目在默认列表中,我希望它的状态为checked保持整体设计不变,我该怎么做?(注意:我意识到我可以重新设计应用程序以避免在映射内部声明变量的问题。这不是问题)。

上面的代码不起作用(很明显),我只是想让所有人了解我在这里尝试的内容。如果运行此命令,则会在声明“ var”的位置出现类似“意外令牌”的错误。

德鲁·舒斯特(Drew Schuster)

render方法有一些语法错误,这应该可以工作:

render() {

  return (
    <div className="example">
      {this.props.items.map((item) => {
        var checked = this.isChecked(item.type);

        return (
          <span key={item.type}>
            <input type="checkbox" checked={checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        )
      })}
    </div>
  );
}

主要错误在于在地图中声明了该函数,您必须将项目包装在括号中,并用方括号(而不是括号)包围该函数。如果粗箭头功能只有一个语句,则无需指定return但是在这种情况下,您添加了这一var checked行,因此现在必须显式地使另一行成为return语句。checked在输入中的设置方式也存在问题希望对您有所帮助!

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

根据复选框的值有条件地进行输入

来自分类Dev

根据React功能组件中的状态变量有条件地设置className

来自分类Dev

有条件地检查angularjs中的复选框

来自分类Dev

在Flutter中有条件地显示/隐藏图块中的复选框

来自分类Dev

带有条件的uitableview中的复选框?

来自分类Dev

Angular.js如何根据另一个列表中是否存在重复元素来有条件地检查复选框

来自分类Dev

根据使用中的prevState有条件地设置状态效果导致指数重新渲染

来自分类Dev

阻止用户在Vue Js中有条件地更改复选框值?

来自分类Dev

取消选中带有条件的复选框

来自分类Dev

取消选中带有条件的复选框

来自分类Dev

如何在jquery中的所有条件下操作复选框

来自分类Dev

根据状态有条件地设置Angular的ng-class

来自分类Dev

有条件地将第一输入值反映到第二输入字段(基于复选框)

来自分类Dev

在React中,我需要从本地存储中获取状态,然后根据该状态有条件地设置另一个状态

来自分类Dev

有条件地设置引导按钮的禁用状态

来自分类Dev

根据AngularJS中的多个条件更改复选框状态

来自分类Dev

欧芹js-如果选中复选框则有条件

来自分类Dev

有条件的JavaScript公式,取决于是否已选中复选框

来自分类Dev

附加带有条件选中属性的复选框

来自分类Dev

防止有条件的复选框输入无限循环

来自分类Dev

有条件地根据另一个变量设置一个变量的值

来自分类Dev

有条件地在python代码中添加变量

来自分类Dev

如何根据单元格值有条件地对ReactJs物料表单元格进行样式设置?

来自分类Dev

ReactJS:状态中的动态复选框

来自分类Dev

根据 Woocommerce 中的购物车商品价格有条件地设置不同的税率

来自分类Dev

选择多个复选框后,我有条件将禁用的类添加到我的div中

来自分类Dev

特定于目标的变量是有条件地设置变量的合适工具吗?

来自分类Dev

如果变量的值匹配数组中的特定字符串,则有条件地设置样式

来自分类Dev

如何基于预定的数据设置有条件地将变量添加到Pyomo约束中

Related 相关文章

  1. 1

    根据复选框的值有条件地进行输入

  2. 2

    根据React功能组件中的状态变量有条件地设置className

  3. 3

    有条件地检查angularjs中的复选框

  4. 4

    在Flutter中有条件地显示/隐藏图块中的复选框

  5. 5

    带有条件的uitableview中的复选框?

  6. 6

    Angular.js如何根据另一个列表中是否存在重复元素来有条件地检查复选框

  7. 7

    根据使用中的prevState有条件地设置状态效果导致指数重新渲染

  8. 8

    阻止用户在Vue Js中有条件地更改复选框值?

  9. 9

    取消选中带有条件的复选框

  10. 10

    取消选中带有条件的复选框

  11. 11

    如何在jquery中的所有条件下操作复选框

  12. 12

    根据状态有条件地设置Angular的ng-class

  13. 13

    有条件地将第一输入值反映到第二输入字段(基于复选框)

  14. 14

    在React中,我需要从本地存储中获取状态,然后根据该状态有条件地设置另一个状态

  15. 15

    有条件地设置引导按钮的禁用状态

  16. 16

    根据AngularJS中的多个条件更改复选框状态

  17. 17

    欧芹js-如果选中复选框则有条件

  18. 18

    有条件的JavaScript公式,取决于是否已选中复选框

  19. 19

    附加带有条件选中属性的复选框

  20. 20

    防止有条件的复选框输入无限循环

  21. 21

    有条件地根据另一个变量设置一个变量的值

  22. 22

    有条件地在python代码中添加变量

  23. 23

    如何根据单元格值有条件地对ReactJs物料表单元格进行样式设置?

  24. 24

    ReactJS:状态中的动态复选框

  25. 25

    根据 Woocommerce 中的购物车商品价格有条件地设置不同的税率

  26. 26

    选择多个复选框后,我有条件将禁用的类添加到我的div中

  27. 27

    特定于目标的变量是有条件地设置变量的合适工具吗?

  28. 28

    如果变量的值匹配数组中的特定字符串,则有条件地设置样式

  29. 29

    如何基于预定的数据设置有条件地将变量添加到Pyomo约束中

热门标签

归档