javascript - 如何在 ReactJS 上创建状态列表

Question

希望有人可以帮助我解决这个问题，并为我的英语不好感到抱歉。

所以我试图创建一个表单列表，其中每个表单都有一个状态，但我无法将每个状态与 previos 分开（我只是在学习反应）。我将留下一些关于应用程序的示例和下面的代码：

应用程序： 应用程序图像

代码示例：

应用程序：

import Header from './Components/Header/Header';
import Card from './Components/Card/Card';
import { useState } from 'react'
import './App.css';

const styles = {
  app: {
    textAlign: 'center',
  },
  button: {
    textAlign: 'center',
    marginTop: '20px'
  }

}
function App() {
  const [value, setValue] = useState({
    id: 0,
    date: '',
    proyect: '--none--',
    hourType: '--none--',
    amount: '',
    description: ''
  })

  const [cards, setCards] = useState([])
  const onClick = () => {
    alert(JSON.stringify(cards))
  }

  const resetValue = () => {
    setValue({
      id: cards.length,
      date: '',
      proyect: '--none--',
      hourType: '--none--',
      amount: '',
      description: ''
    })
  }
  return (
    <div style={styles.app}>
      <Header
        cards={cards}
        setCards={setCards}
        resetValue={resetValue}
        value={value}
      />
      {cards.map(element => {
        return (<Card
          value={value}
          setValue={setValue}
        />)
      })}


      <button style={styles.button} onClick={onClick}>Enviar</button>
    </div>
  );
}

export default App;

标题：

import './header.css'
const Header = ({value, resetValue, cards, setCards})=>{
    const add = ()=>{
        resetValue()
        setCards([...cards,value])
    }
    return(
        <div className="container">
            <button className="boton" onClick={add}>
                Add+
            </button>
        </div>
    )
}

export default Header

形式：

const styles = {
    Form: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        position: 'relative',
    },
    Input: {
        padding: '10px 10px 10px 10px',
        display: 'flex',
        flexDirection: 'column'
    }
}
const Form = ({ value, setValue }) => {
    const proyects = [
        {
            name: "--none--"
        },
        {
            name: "proyecto 1"
        },
        {
            name: "proyecto 2"
        },
        {
            name: "proyecto 3"
        },
        {
            name: "proyecto 4"
        },
        {
            name: "proyecto 5"
        }
    ]
    const hourType = [
        {
            type: "--none--"
        },
        {
            type: "work"
        },
        {
            type: "off-work active"
        },
        {
            type: "off-work pasive"
        },

    ]
    const handleChange = ({ target }) => {
        console.log(target)
        setValue({
            ...value,
            [target.name]: target.type === 'checkbox'
                ? target.checked
                : target.value
        })
    }

    return (
        <div style={styles.Form}>
            <div style={styles.Input}>
                <span> Date </span>
                <input type="date" name="date" value={value.date} onChange={handleChange} />
            </div>
            <div style={styles.Input}>
                <span> Proyect </span>
                <select value={value.proyect} name="proyect" onChange={handleChange}>
                    {proyects.map(
                        element =>
                            <option
                                key={element.name}
                                value={element.name}>
                                {element.name}
                            </option>
                    )}
                </select>
            </div>
            <div style={styles.Input}>
                <span> Hour Type </span>
                <select value={value.hourType} name="hourType" onChange={handleChange}>
                    {hourType.map(
                        element =>
                            <option
                                key={element.type}
                                value={element.type}>
                                {element.type}
                            </option>
                    )}
                </select>
            </div>
            <div style={styles.Input}>
                <span> Amount </span>
                <input type="time" value={value.amount} name="amount" onChange={handleChange} />
            </div>
            <div style={styles.Input}>
                <span> Description </span>
                <textarea name='description' value={value.description} onChange={handleChange} />
            </div>

        </div>
    )
}

export default Form

Card 组件只是将道具传递给表单

对不起，很长的帖子！

标签： javascriptreactjswebcomponents