jjzjj

javascript - 限制表选择不工作 - Material UI 表 - react

coder 2024-07-20 原文

我可能错过了这里的简单答案。现在我的 table 上有一个三元组。如果选定的数组长度大于一个数字，则呈现一个禁用复选框的表格。我还为带有禁用复选框的表挂接了一个不同的 handleClick 函数，该复选框只会取消选择。这实质上将复选框变为灰色(禁用它们)并允许用户取消选中以便他们可以取回表格。问题是如果他们单击以选择尚未选中的内容(此时禁用)，它会删除所有选定的检查并再次启用表格以供选择。这是一个问题，因为底层数据实际上并没有从我正在使用的实时数据库中删除。

所以我在代码沙箱上重现了这个问题。 (加载可能需要一秒钟)

  1. 选择 2(应该禁用表格)
  2. 然后选择任何未选中的复选框，它将删除所有禁用的检查并重新启用 供选择的表格。

https://codesandbox.io/s/yw8zl6oqk9

基本上我想在给定数量的选择时停止用户。而且我只希望用户能够取消选择当前选定的项目。我真的不认为这是最好的方法。我宁愿让检查颜色保持启用状态，只是让用户在 3(任意数字)处停止。如果它大于 3，我已经在 handleClick 函数中尝试了一些其他方法，但它给用户留下了他们无法取消选中或选中的表。如果您知道如何解决这个问题，请告诉我。谢谢!

我被要求提供一个更清晰的用例，所以这里是。

  • 用户只能在列表中选择 2

  • 一旦用户选择了 2 个，他们就不能再选择任何其他 项目

  • 用户可以取消选择一项或多项，然后选择最多 2 项不同的 再次元素

  • 用户可以一直只选择 2 项并取消选择以恢复选择能力，只要他们愿意

The issue im having with this use case is the when the user has selected 2, selectability is supposed to be disabled, when an item that is not selected is selected, it deselects the 2 items that were selected.我发布的沙箱反射(reflect)了这个问题。

最佳答案

我找到了最适合我的用例的解决方案。我不需要三元组。我不需要第二个 onclick 函数来处理取消选择。这导致了一个问题，因为当用户选择一个已经被选中的行时，返回的选定索引是 -1，我没有在 handleRemoveOnly 函数中处理它。我不认为我也需要。无论哪种方式，我现在都有一个更优雅的解决方案。

一个 onclick 和额外的如果在 '-1' 上用于未选择的行。不需要像我一样用三元禁用表。这更适合我的用例。

这是一个新的 onclick 函数

   handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];

if (selectedIndex === -1 && selected.length > 1) {
  console.log("hc0::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(selected));
} else if (selectedIndex === -1) {
  console.log("hc1::", selectedIndex);
  newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
  console.log("hc2::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
  console.log("hc3::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
  console.log("hc4::", selectedIndex);
  newSelected = newSelected.concat(
    selected.slice(0, selectedIndex),
    selected.slice(selectedIndex + 1)
  );
}

这里是代码沙箱

错误的沙箱:https://codesandbox.io/s/yw8zl6oqk9

固定沙盒:https://codesandbox.io/s/m4vk5w20lx

希望这对某人有帮助。

关于javascript - 限制表选择不工作 - Material UI 表 - react ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51254554/

javascriptMaterialselectedIndexselectednewSelectedreactjsmaterial-ui

有关javascript - 限制表选择不工作 - Material UI 表 - react的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  4. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

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

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

  7. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  8. ruby - `rescue $!` 是如何工作的？ - 2

    我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

  9. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

  10. ruby - 这个 ruby​​ 注入(inject)魔术是如何工作的？ - 2

    我今天看到了一个ruby​​代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？ 最佳答案 没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem

随机推荐