Javascript 在react中提交表单数据

我有一些组件，在每一个组件中，我都有一个表单，单击“下一步”，我将打开一个新表单（称为“新组件”），最后一次打开表单时，我将其更改为“提交”

我想要实现的目标

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";

function AddCompanyMain() {
  const [currState, setCurrState] = useState(1);
  const [allState, setAllstate] = useState(3);

  const moveToPrevious = () => {
    setCurrState(currState - 1);
  };
  const moveToNext = () => {
    setCurrState(currState + 1);
  };

  return (
    <div>
      <div class="progress">
        <div>{currState}</div>
      </div>

      {currState === 1 && <Form1 />}
      {currState === 2 && <Form2 />}
      {currState === 3 && <Form3 />}

      {currState !== 1 && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {currState !== allState && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currState === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

1：每次单击“下一步”和“上一步”时，我都想使用react form hook验证我的表单

2：点击提交，我应该可以看到所有的数据

3：单击“背面旁边”时，输入数据不应丢失

问题

因此，对于验证，我使用的方法非常简单，但在这里我无法发现，因为我的按钮不在表单中，它们位于主组件中，因此我将如何验证并在提交表单时单击所有数据提交表单

我的代码

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";

function AddCompanyMain() {
  const [currState, setCurrState] = useState(1);
  const [allState, setAllstate] = useState(3);

  const moveToPrevious = () => {
    setCurrState(currState - 1);
  };
  const moveToNext = () => {
    setCurrState(currState + 1);
  };

  return (
    <div>
      <div class="progress">
        <div>{currState}</div>
      </div>

      {currState === 1 && <Form1 />}
      {currState === 2 && <Form2 />}
      {currState === 3 && <Form3 />}

      {currState !== 1 && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {currState !== allState && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currState === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

import React，{useState}来自“React”；
从“/components/Form1”导入Form1；
从“/components/Form2”导入Form2；
从“/components/Form3”导入Form3；
函数AddCompanyMain（）{
const[currState，setCurrState]=useState（1）；
const[allState，setAllstate]=useState（3）；
常量moveToPrevious=（）=>{
设置当前状态（当前状态-1）；
};
常量moveToNext=（）=>{
设置当前状态（当前状态+1）；
};
返回(
{currState}
{currState===1&&}
{currState===2&&}
{currState===3&&}
{currState！==1&&(
返回
)}
{currState！==allState&&(
下一个
)}
{currState===3&&(
提交
)}
);
}
导出默认AddCompanyMain；

我的完整代码

我只是在寻找一种好的方法，因为在这里我不能在每个组件中放置submit，因为我必须在顶部显示步骤。

您可以，然后将onChange道具传递给每个组件，以更新每个子组件的状态。我不确定这将如何处理react钩子窗体，但这通常是您希望同步子组件状态的方式

import React from "react";
import "./styles.css";

const FormOne = ({ value, onChange }) => (
  <div>
    Form 1
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>

)

const FormTwo = ({ value, onChange }) => (
  <div>
    Form 2
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

const FormThree = ({ value, onChange }) => (
  <div>
    Form 3
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

export default function App() {
  const [formOne, setFormOne] = React.useState('')
  const [formTwo, setFormTwo] = React.useState('')
  const [formThree, setFormThree] = React.useState('')
  const [index, setIndex] = React.useState(0)

  const moveUp = (e) => {
    e.preventDefault()

    if (index !== 2) {
      setIndex(index => index += 1)
    }
  }

  const moveDown = (e) => {
    e.preventDefault()

    if (index !== 0) {
      setIndex(index => index -= 1)
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()

    console.log(formOne, formTwo, formThree)
  }

  const form = index === 0
    ? <FormOne value={formOne} onChange={setFormOne} />
    : index === 1
    ? <FormTwo value={formTwo} onChange={setFormTwo} />
    : <FormThree value={formThree} onChange={setFormThree} />

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        {form}
        {index !== 0 && <button onClick={moveDown}>Back</button>}
        {index !== 2
          ? <button onClick={moveUp}>Next</button>
          : <button type='submit'>Submit</button>
        }
      </form>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
const FormOne=（{value，onChange}）=>(
表格一
onChange（e.target.value）}/>
)
常量FormTwo=（{value，onChange}）=>(
表格二
onChange（e.target.value）}/>
)
常量FormThree=（{value，onChange}）=>(
表格三
onChange（e.target.value）}/>
)
导出默认函数App（）{
常量[formOne，setFormOne]=React.useState（“”）
const[formTwo，setFormTwo]=React.useState（“”）
常量[formThree，setFormThree]=React.useState（“”）
常量[index，setIndex]=React.useState（0）
常数上移=（e）=>{
e、 预防默认值（）
如果（索引！==2）{
setIndex（index=>index+=1）
}
}
常数下移=（e）=>{
e、 预防默认值（）
如果（索引！==0）{
setIndex（index=>index-=1）
}
}
常量handleSubmit=（e）=>{
e、 预防默认值（）
console.log（表格一、表格二、表格三）
}
常数形式=索引===0
? 
：索引===1
? 
: 
返回(
{form}
{index！==0&&Back}
{索引！==2
下一个
：提交
}
);
}

您可以，然后将onChange道具传递给每个子级，以更新每个子级的状态。我不确定这将如何处理react钩子窗体，但这通常是您希望同步子组件状态的方式

import React from "react";
import "./styles.css";

const FormOne = ({ value, onChange }) => (
  <div>
    Form 1
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>

)

const FormTwo = ({ value, onChange }) => (
  <div>
    Form 2
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

const FormThree = ({ value, onChange }) => (
  <div>
    Form 3
    <input type='text' value={value} onChange={e => onChange(e.target.value)} />
  </div>
)

export default function App() {
  const [formOne, setFormOne] = React.useState('')
  const [formTwo, setFormTwo] = React.useState('')
  const [formThree, setFormThree] = React.useState('')
  const [index, setIndex] = React.useState(0)

  const moveUp = (e) => {
    e.preventDefault()

    if (index !== 2) {
      setIndex(index => index += 1)
    }
  }

  const moveDown = (e) => {
    e.preventDefault()

    if (index !== 0) {
      setIndex(index => index -= 1)
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()

    console.log(formOne, formTwo, formThree)
  }

  const form = index === 0
    ? <FormOne value={formOne} onChange={setFormOne} />
    : index === 1
    ? <FormTwo value={formTwo} onChange={setFormTwo} />
    : <FormThree value={formThree} onChange={setFormThree} />

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        {form}
        {index !== 0 && <button onClick={moveDown}>Back</button>}
        {index !== 2
          ? <button onClick={moveUp}>Next</button>
          : <button type='submit'>Submit</button>
        }
      </form>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
const FormOne=（{value，onChange}）=>(
表格一
onChange（e.target.value）}/>
)
常量FormTwo=（{value，onChange}）=>(
表格二
onChange（e.target.value）}/>
)
常量FormThree=（{value，onChange}）=>(
表格三
onChange（e.target.value）}/>
)
导出默认函数App（）{
常量[formOne，setFormOne]=React.useState（“”）
const[formTwo，setFormTwo]=React.useState（“”）
常量[formThree，setFormThree]=React.useState（“”）
常量[index，setIndex]=React.useState（0）
常数上移=（e）=>{
e、 预防默认值（）
如果（索引！==2）{
setIndex（index=>index+=1）
}
}
常数下移=（e）=>{
e、 预防默认值（）
如果（索引！==0）{
setIndex（index=>index-=1）
}
}
常量handleSubmit=（e）=>{
e、 预防默认值（）
console.log（表格一、表格二、表格三）
}
常数形式=索引===0
? 
：索引===1
? 
: 
返回(
{form}
{index！==0&&Back}
{索引！==2
下一个
：提交
}
);
}

您可以通过执行以下操作来解决问题：

• 在app.js中，将表单存储在对象数组中，并根据步骤（currentFrom状态）呈现它们
• 在父组件（而不是子组件）中调用

  useForm

  ，并将

  register、errors、defaultValues

  值作为道具传递给

  表单

  组件
• 在

  表单

  组件中，您需要抓取

  注册等

  作为道具
• 将

  defaultValues

  保持在一种状态，并在next/previous的

  onClick

  中更新它们。您需要输入，然后使用设置状态（默认值）

另外：

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";

function AddCompanyMain() {
  const [currState, setCurrState] = useState(1);
  const [allState, setAllstate] = useState(3);

  const moveToPrevious = () => {
    setCurrState(currState - 1);
  };
  const moveToNext = () => {
    setCurrState(currState + 1);
  };

  return (
    <div>
      <div class="progress">
        <div>{currState}</div>
      </div>

      {currState === 1 && <Form1 />}
      {currState === 2 && <Form2 />}
      {currState === 3 && <Form3 />}

      {currState !== 1 && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {currState !== allState && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currState === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

• 为了在单击下一个/上一个按钮时触发验证，您需要使用

• 为了在单击“下一步/上一步”时保留值，需要使用prop

见

代码片段

import React，{useState}来自“React”；
从“/components/Form1”导入Form1；
从“/components/Form2”导入Form2；
从“/components/Form3”导入Form3；
从“react hook form”导入{useForm}；
函数AddCompanyMain（）{
常数{
登记
触发验证，
错误，
设置值，
获取值
}=useForm（）；
const[defaultValues，setDefaultValues]=useState（{}）；
常数形式=[
{
字段：[“uname”]，
组件：（寄存器、错误、默认值）=>(
)
},