小编man*_*kur的帖子

反应中采取错误验证的多步骤形式

我在这里写我的问题作为一个新的部分。

我制作了一个多步骤表单,其中我在第一个表单中进行了动态归档,该字段是手动创建密码或仅自动生成密码。

所以我的多步表单工作正常,来回正常,但我必须将字段传递给主要组件,以便它可以检查验证,并且我也在传递该密码

问题来了

当我通过该password字段时,即使我点击了自动生成的密码,它也会进行验证

我正在通过这样的领域 fields: ["uname", "email", "password"], //to support multiple fields form

所以即使不检查让我创建密码也需要验证。

当我点击让我创建密码并输入一些值然后点击下一步时,当我回来时,输入字段再次设置为隐藏到其初始状态我知道为什么会发生这种情况,因为当我回来时,它会再次恢复初始状态.

我现在厌倦了这件事,我已经尝试了很多事情,但没有奏效,下面是我的代码

    import React, { useState, useEffect } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";

    function MainComponent() {
      const { register, triggerValidation, errors, getValues } = useForm();
      const [defaultValues, setDefaultValues] = useState({});
    
      const forms = [
        {
          fields: ["uname", "email", "password"], //to support multiple fields form
          component: (register, errors, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks react-hook-form

7
推荐指数
1
解决办法
642
查看次数

在反应中刷新页面时丢失组件数据

我正在做一些需要维护应用程序级别状态(即全局状态)的事情,我正在使用反应钩子useContextuseReducer.

所以我正在做的是单击按钮,我正在设置我的上下文,然后通过在我的App.js.

我知道为什么我要使用我的数据,因为我首先将初始状态设置为 null,这就是为什么当我刷新页面时它再次设置为 null,但我的要求不是在单击按钮后我想将该数据存储为全局状态,以便我可以进一步使用它

但这不应该是我想要使我的数据全局化并且在刷新时它不应该丢失的情况

我的代码

我的上下文文件

import React, { useReducer, createContext } from "react";

const initialstate = {
  someData: null
};

const MyContext = createContext({
  someData: null,
  click_btn: d => {}
});
const MyReducer = (state, action) => {
  switch (action.type) {
    case "BTNCLICKED":
      return {
        ...state,
        someData: action.payload
      };

    default:
      return state;
  }
};

const MyProvider = props => {
  const [state, dispatch] = useReducer(MyReducer, initialstate);
  const click_btn = d => …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks use-reducer use-context

7
推荐指数
1
解决办法
3万
查看次数

使用MySQL中的印度数字分隔符格式化货币金额

我有一个查询,它给我总量100000.0000,我想显示像100000必须显示为Rs.1,00,000.00

这是我的查询:

String sql = " select distinct round(sum(netamount)) as amount from syncbill where cancelled<>'Y' and year(curdate())=year(billdate)";
ResultSet resultSetYtd = statement.executeQuery(YtdQuery);
while (resultSetYtd.next()) {
  String AmountYtd = resultSetYtd.getString("amount");
  system.out.println(AmountYtd);

}
Run Code Online (Sandbox Code Playgroud)

我可以仅通过查询实现此目的吗?

java mysql

6
推荐指数
1
解决办法
401
查看次数

如何验证反应选择

我正在使用react-select来更好地查看UI,并且我已经实现了它,现在我想做的是

  • 我想在用户单击“完成”按钮(表单提交)时验证该输入字段
  • 我正在使用react-hook-form进行验证
  • 他们提供ref={register}保存输入字段值的
  • 所以对于正常的输入字段或选择我可以像下面一样使用它
<label  htmlFor="fname">
    First Name
</label>
<input
    type="text"
    name="fname"
    id="fnameid"
    className="form-control"
    ref={register({
        required: 'First name is required',
    })}
/>

{errors.fname && (
    <div>
        <span className="text-danger">
            {errors.fname.message}
        </span>
    </div>
)}
Run Code Online (Sandbox Code Playgroud)

现在上面的工作正常,但如果react-select我不知道如何继续

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
/>
Run Code Online (Sandbox Code Playgroud)

因此,当我单击“提交”按钮时,它仅对 fname 进行验证,并仅在控制台上为 fname 提供输出

我尝试像下面这样做

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
    ref={register({
        required: 'age is required is required',
    })}
/>
Run Code Online (Sandbox Code Playgroud)

代码沙箱这是我的代码沙箱我的工作代码,请检查

编辑

我尝试了这种方法,但它不占用defaultValueValue,因为我想显示选定的一个值,并且在某些情况下,我从服务器获取我想显示为选定的值。

javascript reactjs react-select react-hooks react-hook-form

6
推荐指数
1
解决办法
1万
查看次数

How to align text right on print

I have an HTML table which has only one row and the first column is auto complete when user selects any item from it.

我正在填充各个字段,因此在填充所有数据之后,当用户单击时,我试图将表的某些列数据右对齐print

我正在使用,@media print但没有做任何事情

请检查这个小提琴

console.clear()

const data = [ //data to populate Item Name search input field
  {
    "ItemName": "Butter"
  },
  {
    "ItemName": "Rice"
  },
  {
    "ItemName": "Milk"
  },
  {
    "ItemName": "Ice Cream"
  },
  {
    "ItemName": "Curd"
  }
]

const data1 = { // this data will be dynamic but for now …
Run Code Online (Sandbox Code Playgroud)

javascript css html-table

5
推荐指数
0
解决办法
108
查看次数

我可以在 Vue 中将默认端口从 8080 更改为其他端口吗?

我一直在使用 Vue.js 和 Node.js 来构建我的应用程序。当我开始使用 Vue 时,它​​默认在 8080 上运行,而 Node 我在 3008 上运行。

我想要做的是由于某些情况,我想将 Vue 的端口从 8080 更改为任何其他端口,例如 8086 或 3005。我该怎么做?

port vue.js vuejs2

4
推荐指数
3
解决办法
6186
查看次数

如何将 SQL 数据映射到 Java JSON 对象和 JSON 数组?

我正在使用 Java 构建 JSON 对象,并希望将它们发送到 JSON 数组中,因为我的数据库中有未排序的数据。我无法将数据映射为正确的格式。我觉得我缺乏逻辑。

下面是我的数据库表的图像,它在 MySQL 中:

这是我在数据库中的表

我要创建的是该表的 JSON 格式,如下所示:

  [
  {
    "1": "450",
    "2": "495",
    "OUTLET": "TOTTAL2",
    "BILLDATE": "",
    "TOTAL": "945"
  },
  {
    "1": "10",
    "2": "15",
    "OUTLET": "Ol1",
    "BILLDATE": "08-21-2018",
    "TOTAL": "25"
  },
  {
    "1": "20",
    "2": "25",
    "OUTLET": "ol1",
    "BILLDATE": "08-22-2018",
    "TOTAL": "45"
  },
  {
    "1": "30",
    "2": "35",
    "OUTLET": "ol1",
    "BILLDATE": "08-23-2018",
    "TOTAL": "65"
  },
  {
    "1": "40",
    "2": "45",
    "OUTLET": "ol2",
    "BILLDATE": "08-21-2018",
    "TOTAL": "85"
  },
  {
    "1": "50",
    "2": "55",
    "OUTLET": …
Run Code Online (Sandbox Code Playgroud)

java mysql json

2
推荐指数
1
解决办法
2031
查看次数

如何使用反应库将数据导出到 excel

我正在使用react-html-to-excel将我的表转换为 excel 但我想要的是不要将第一列导出到 excel 即第一列不应导出到 excel 我已经浏览了我正在使用这个库的文档,但没有找到任何事物

我的代码

 <div className="App">
      <ReactHTMLTableToExcel
        id="test-table-xls-button"
        className="download-table-xls-button"
        table="table-to-xls"
        filename="test"
        sheet="tablexls"
        buttonText="Download as XLS"
      />
      <table id="table-to-xls">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr>
              <td>{item.firstname}</td>
              <td>{item.lastname}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
Run Code Online (Sandbox Code Playgroud)

代码链接和框完整代码

如果这个库不支持它,那么我愿意使用任何其他做这些事情的库。

javascript excel reactjs

2
推荐指数
1
解决办法
2万
查看次数