在 ReactJS 中将表单数据提交到表中

Posted 2023-03-05

【中文标题】在 ReactJS 中将表单数据提交到表中

【英文标题】：Submit formsdata into a table in ReactJS

【发布时间】：2022-01-07 06:43:03

【问题描述】：

对不起这个新手问题，但我对 ReactJS 和 javascript 很陌生，我的问题是我试图在包含列标题的表中的输入字段中提交值：练习、设置、代表和描述。我的目标是当我点击“将锻炼添加到锻炼计划”时，这些值将存储在表格中，并且我可以在下方的新行中添加一些新值，但它不起作用，因为当我点击add-button 页面刚刚刷新，值不存储在表中。

这是我的代码：

import React from 'react'
import './Trainerworkout.css'
import  useState  from 'react/cjs/react.development';


export default function Trainerworkout() 
   const [workout, setWorkout] = useState([
      Exercise: "", Sets: "", Reps: "", Description: ""
   ]
  )

  function handleChange(event) 
    const value = event.target.value;
    setWorkout(
        ...workout,
        [event.target.name]: value
   );
  

  function handleSubmit(event) 
      workout.push(`$workout.Exercise $workout.Sets $workout.Reps $workout.Description`)
  


  return (
     <>
       <h3>Add a workout program to a client</h3>

       <form onSubmit=handleSubmit>
            <label>
                Exercise:
                <input type="text" name="Exercise" value=workout.Exercise || '' onChange=handleChange></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Set:
                <input type="text" name="Sets" value=workout.Sets || '' onChange=handleChange></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Reps:
                <input type="text" name="Reps" value=workout.Reps || '' onChange=handleChange></input>
            </label>
            <br></br>
            <br></br>
            <label>
                Description:
                <input type="text" name="Description" value=workout.Description || '' onChange=handleChange></input>
            </label>
            <br></br>
            <br></br>

            <button type="submit">Add exercise to workoutprogram</button>
        </form>

        <div className="table">
           <table className="exerciseTable">
              <thead>
                 <tr>
                    <th>Exercise</th>
                    <th>Set</th>
                    <th>Reps</th>
                    <th>Description</th>
                 </tr>
              </thead>
              <tbody>
                  <tr>
                     <td>workout.Exercise</td>
                     <td>workout.Sets</td>
                     <td>workout.Reps</td>
                     <td>workout.Description</td>
                  </tr>
              </tbody>
           </table>
        </div>
      </>
   );

【参考方案1】：

您需要另一种状态来存储您的数据（如果您刷新页面，数据将进入）。试试这个：

import React,  useState  from 'react';
import './style.css';

export default function Trainerworkout() 
  const [workout, setWorkout] = useState(
    exercise: '',
    sets: '',
    reps: '',
    description: '',
  );

  const [workoutData, setWorkoutData] = useState([]);

  const handleChange = (e) => 
    e.preventDefault();
    setWorkout(
      ...workout,
      [e.target.name]: e.target.value,
    );
  ;

  const handleSubmit = (e) => 
    e.preventDefault();
    setWorkoutData([...workoutData, workout]);
    setWorkout('');
  ;

  const  exercise, sets, reps, description  = workout;

  return (
    <>
      <h3>Add a workout program to a client</h3>

      <form onSubmit=handleSubmit>
        <label>
          Exercise:
          <input
            type="text"
            name="exercise"
            placeholder="Exercice"
            value=exercise || ''
            onChange=handleChange
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Set:
          <input
            type="text"
            name="sets"
            placeholder="Sets"
            value=sets || ''
            onChange=handleChange
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Reps:
          <input
            type="text"
            name="reps"
            placeholder="Reps"
            value=reps || ''
            onChange=handleChange
          />
        </label>
        <br></br>
        <br></br>
        <label>
          Description:
          <input
            type="text"
            name="description"
            placeholder="Description"
            value=description || ''
            onChange=handleChange
          />
        </label>
        <br></br>
        <br></br>

        <button type="submit">Add exercise to workoutprogram</button>
      </form>

      <div className="table">
        <table className="exerciseTable">
          <thead>
            <tr>
              <th>Exercise</th>
              <th>Set</th>
              <th>Reps</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            workoutData &&
              workoutData.map((d, index) => (
                <tr key=index>
                  <td>d.exercise</td>
                  <td>d.sets</td>
                  <td>d.reps</td>
                  <td>d.description</td>
                </tr>
              ))
            
          </tbody>
        </table>
      </div>
    </>
  );

演示： Stackblitz