我想将我的两种状态输入数据放入一个表中以做出反应

Question

我想将输入数据放入表格行中。 但是我的数据使用不同的标签在不同的行上。我在导入的组件中只制作了一个标签。

这是主要组件

 import './App.css';
    import { useState } from 'react'
    import Data from './Data';
    
    function Component() {
    
        const [IdData, setIdData] = useState()
        const [Input, setInput] = useState()
        const [Items, setItems] = useState([])
    
        const addData = () => {
            setItems((newData) => {
                return [...newData, IdData, Input]
            })
           
            setInput("");
            setIdData("");
        }
    
        const idChange = (e) => {
            setIdData(e.target.value)
        }
        const inputChange = (e) => {
            setInput(e.target.value)
        }
    
      return (
        <>
          <div className="main">
    
          <div className="center">
              <br />
              <h2>Table Layout</h2>
            <div className="inner">
                <input className="id" type="number" autoFocus onChange={idChange} value={IdData} placeholder='ID' />
                <input type="text" placeholder='Name' onChange={inputChange} value={Input}/>
                <i className='fa fa-check' onClick={addData}></i>
            </div>
    
    
    
    
                {
                    Items.map((todoItems, index) => {
                        return <Data data={todoItems}key={index} />
    
                     
                    })
                }
                
            
          </div>
    
          </div>
        </>
      );
    }

export default Component;

我想将输入数据放入表格行中。 但是我的数据使用不同的标签在不同的行上。我只在导入的组件中制作了一个标签。 这是导入的组件

import React from 'react'
// import './App.css'

function Data(props) {
    return (
        <>
        <table>

            <tr>
            <th>ID</th>
            <th>Name</th>
            </tr>
            <tr>
            <tbody>
                
                <td>{props.data}</td>
            </tbody>
            </tr>
        </table>

            
                    {/* <td><i className='fa fa-times'></i></td> */}
        </>
    )
}

export default Data

我想将输入数据放入表格行中。 但是我的数据使用不同的标签在不同的行上。我在导入的组件中只制作了一个标签。

这是 CSS 文件

@import url('https://fonts.googleapis.com/css2?family=The+Nautigal:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope&family=The+Nautigal:wght@700&display=swap');

* {
  padding: 0;
  margin: 0;
}
.main {
  background-image: linear-gradient(to left, #5f2c82, #49a09d);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
p {
  display: inline;
}

.center  h2 {
  font-family: 'The Nautigal', cursive;
  font-size: 50px;
  text-align: center;
}
.center {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  background: white;
  width: 40%;
  height: 80%;
  border-radius: 20px;
}
.inner {
  width: 100%;
  margin: 30px 0 0 40px;  
  display: flex;
  flex-direction: row;
  justify-content: left;
}

.data {
  /* width: 20%; */
  font-family: 'Manrope', sans-serif;
  display: flex; 
  /* flex-direction: row; */
  /* justify-self: stretch; */
  margin: 10px 39px 0 39px;
  font-size: 16px;
  background: rgb(216, 216, 216);
  /* border-radius: 10px; */
  padding: 10px 10px;
  position: relative;
  /* width: 100%;  */
}
.inline {
  display: flex;
  flex-direction: row-reverse;
}
.data:after {
  content: '';
  position: absolute;
  height: 42px;
  top: 0px;
  left: 0px;
  background: linear-gradient(to left, #5f2c82, #49a09d);
  width: 5px;
}

.data:hover {
  background: linear-gradient(to left, #5f2c82, #49a09d);
  color: white;
  cursor: pointer;
}
.inner input {
  display: flex;
  justify-content: center;
  width: 60%;
  padding: 10px 5px;
  font-size: 18px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey;
}
.inner .id {
  width: 10%;
  margin-right: 5px;
}
.fa-check {
  background: linear-gradient(to left, #5f2c82, #49a09d);
  opacity: 0.7;
  
  border-radius: 8px;
  color: white;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9%;
  margin-left: 5px;
}

.fa-check:hover {
  cursor: pointer;
  opacity: 1;
}

Answer 1

只需尝试将setITems 更改为：

setItems((newData) => {
    return [...newData].concat([[IdData, Input]]);
});