在提交时模糊任何关注的领域|反应最终形式

时间:2019-10-19 17:03:35

标签: reactjs react-final-form final-form

这可能是一个错误,但是我想在发布GitHub问题之前在此处发布,以查看整个社区是否有建议,或者是否有人可以因为做错事而叫我。

我想模糊Submit上的所有焦点字段。简单。

根据文档,onSubmit函数作为参数传递给(values, form),而form api包括获取所有注册字段的方法,以及据说模糊的方法任何领域。这是代码:

const onSubmit = async (values, form) => {
  const fieldsNames = form.getRegisteredFields();
  fieldsNames.forEach(name => form.blur(name));

  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

我直接从FinalForms文档中派生了基本示例,并添加了这两行以查看是否可以使他们的示例正常工作,但是没有。要进行测试,只需在名字字段中键入,然后按Enter键。该领域保持专注。

CodeSandbox Demo Here

Final Form: FormApi Docs

感谢您的阅读!

1 个答案:

答案 0 :(得分:1)

<?php get_header();?> <head><style> </style> <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> </head> <!------------- main page temeplate----------------------------------------------------------------------------------> <div class="container" style="margin-top:150px;"> <div class="vc_row wpb_row vc_row-fluid vc_custom_1570471444355 vc_row-has-fill vc_row-o-full-height vc_row-o-columns-middle vc_row-o-equal-height vc_row-flex" style="min-height: 64.0809vh;"><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"> <h4 style="text-align: center;"><strong><span style="color: #000000;">Welcome to our online store, where you can view and buy your champion’s photo. Please refer to your photo ticket number (given to the athlete at the photo booth) and fill in the information below. If you do not have a ticket you may search all to find your photo.</span> </strong></h4> </div> </div> <div class="wpb_widgetised_column wpb_content_element"> <div class="wpb_wrapper"> <form method="Post" id="form1" action="index.php"> <h3>PictureUS Galley Search Form:</h3> <select> <?php global $wpdb; foreach($gallerylist as $galleryrow){ $name=$galleryrow->name; ?> <option value=""><?php echo $name; ?></option> <?php }?> </select> <div> <input type="radio" name="tab" value="event" onclick="show1();event(x);" /> <b>SELECT ALL PHOTOS</b> <input type="radio" name="tab" value="event2" onclick="show2();event(x);" /> <b>PHOTO BY ID</b></div> <div class="hide" id="div1">Enter Photo ID <input type="number" value="" required/> </div> <button id="mbutton" style="background-color:black; color:white;" type="submit">submit</button> </form> <!-----------------------------form-End------------> </div> </div> </div></div></div></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div></div></div></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div></div> <div class="wpb_single_image wpb_content_element vc_align_center"> <figure class="wpb_wrapper vc_figure" style="user-select: none;"> <div class="vc_single_image-wrapper vc_box_border vc_box_border_black"><img width="422" height="542" src="https://www.pictureus.net/wp-content/uploads/2019/09/INTERNATIONAL-FIGHT-SHOWDOWN.jpg" class="vc_single_image-img attachment-full" alt="" style="user-select: none;"></div> </figure></div> </div></div></div></div> </div> <?php require_once('wp-config.php'); global $wpdb; $gallerydefine= $wpdb->prefix."ngg_gallery"; $query="SELECT * FROM $gallerydefine"; $gallerylist = $wpdb->get_results($query,OBJECT); ?> <?php get_footer(); ?> 告诉您“最终形式”该字段已模糊(它将字段的状态标记为模糊)。它更像是一个听众。要真正强制模糊字段,您需要引用DOM元素。

类似getElementById('myField').blur()