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

Question

对不起这个新手问题，但我对 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>
      </>
   );
}

Answer 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