草庐IT

javascript - react 选择值为 null

coder 2024-05-11 原文

我有以下代码作为我的 React 组件的一部分:

<select
  className="input form-control"
  onChange={this.onUserChanged}
  value={task.user_id}>
  <option value=''></option>
  {this.renderUserOptions()}
</select>

当第一次呈现组件时 task.user_id 为 null 时，select 会正确显示带有值为 '' 的空选项。 .

但是，如果我将值从具有值的值更改回默认选项，服务器端会正确更新，任务对象返回 null对于 task.user_id但选择不会更改为默认值。

我应该怎么做才能处理这种情况？

最佳答案

当为你的select组件设置值时，你必须将null转换为''；当从您的组件接收值时，您必须将 '' 转换为 null。一个简单的例子:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { selected: null };
    }

    render() {
        return <div>
            <select
                className="input form-control"
                onChange={e => this.setState({ selected: e.target.value || null })}
                value={this.state.selected || ''}>
                <option value=''></option>
                <option value='1'>cook dinner</option>
                <option value='2'>do dishes</option>
                <option value='3'>walk dog</option>
            </select>
            <input type='button' onClick={() => this.setState({ selected: null })} value='Reset' />
        </div>
    }
}

假设您的 ID 始终是真实的，这会起作用:e.target.value || null 会将选中的空字符串转换为null；和 this.state.selected || '' 会将您的 null 状态转换为空字符串。如果您的 ID 可能是假的(例如数字 0)，您将需要更可靠的转换。

See Fiddle here .

关于javascript - react 选择值为 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36187522/

javascriptreactcodeoptionvaluereactjs

有关javascript - react 选择值为 null的更多相关文章

  1. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  2. "\0"null 的 Ruby 测试？ - 2

    我在破坏脚本的字符串中出现了一些奇怪的字符。据我所知，通过putbadstring到控制台，它们是"\0\0\0\0"。我想对此进行测试，以便我可以忽略它们...但是如何呢？以为这就是blank?和empty?的用途？!？:>badstring="\0"=>"\u0000">badstring.blank?NoMethodError:undefinedmethod`blank?'for"\u0000":Stringfrom(irb):97from/Users/meltemi/.rvm/rubies/ruby-2.0.0-p195/bin/irb:16:in`'>badstring.em

  3. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  4. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

  7. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  8. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  9. ruby-on-rails - 多次选择一个随机数，但绝不会两次选择相同的随机数 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？

  10. ruby - mixin方法名冲突时如何选择调用方法？ - 2

    当你在类中包含方法名冲突的模块时，它会使用类定义的方法。有没有办法选择我想运行的？moduleBdefself.hello"helloB"endendclassAincludeBdefself.hello"helloA"endendA.hello#=>thisprints"helloA",whatifIwant"helloB"? 最佳答案 Ben，当你在Ruby中调用一个方法(比如hello)时，会发生以下情况:如果接收者的特征类有一个名为hello的方法，它将被调用。如果不是:如果接收者的类有一个名为hello的实例方法，它将被调

随机推荐