Question

请问我如何在响应中关注输入日期字段？我正在使用语义插件 https://www.npmjs.com/package/semantic-ui-calendar-react

我想将日期输入字段集中在按钮上，这是我的代码。这是我的代码 https://codesandbox.io/s/3l414mno5

focus = () => {
    console.log(this.a);
    this.a[0].onFocus();
    // this.inputRef.focus()
  };

为什么焦点不在输入字段中？有更新吗？

Answer 1

要使焦点集中在按钮单击上，您需要设置如下参考：

var dataList = [];
$("#saveBtn").click(function(e) {

  var allOptionsSelected = getEditableTableOptionData("#tempTable");
  console.log(allOptionsSelected);
});

function getEditableTableOptionData(param_table) {
  var tRowList = $(param_table).find("tbody").find("tr");
  var dataList = [];
  for (var rIndex = 0; rIndex < tRowList.length; rIndex++) {
    var tRow = tRowList[rIndex];
    var rData = {};
    var tCellList = $(tRow).find("td");
    for (var cIndex = 0; cIndex < tCellList.length; cIndex++) {
      var tCell = tCellList[cIndex];
      if ($(tCell).find("select").length)
        rData[$(tCell).find("option").prop("value")] = $(tCell).find(
          "option:selected").val();
    }
    dataList.push(rData);
  }
  return dataList.flatMap(e=>Object.values(e));
}

并通过如下所示的按钮单击来访问它：

<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <button id="saveBtn" class="btn btn-primary pull-right">Save</button>
</body>

</html>

this.<your_form_name>.controls['control_name'].setErrors({'incorrect': false});-是打开日历弹出窗口的功能，您使用的插件具有如下代码，请选中here

demo，然后在多个数据字段中使用动态引用。希望对您有所帮助。

如何在反应中集中输入日期字段？

1 个答案: