javascript - 使用 React 向表中添加条目
问题描述
按下提交按钮后,信息应与之前输入的所有信息一起显示在下面的列表中(自动按姓氏排序)。这样,应用程序就可以用作简单的电话簿。
这就是我现在所拥有的。我需要在相应部分下显示从输入到表格的输入值 -
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const style = {
table: {
borderCollapse: 'collapse'
},
tableCell: {
border: '1px solid gray',
margin: 0,
padding: '5px 10px',
width: 'max-content',
minWidth: '150px'
},
form: {
container: {
padding: '20px',
border: '1px solid #F0F8FF',
borderRadius: '15px',
width: 'max-content',
marginBottom: '40px'
},
inputs: {
marginBottom: '5px'
},
submitBtn: {
marginTop: '10px',
padding: '10px 15px',
border:'none',
backgroundColor: 'lightseagreen',
fontSize: '14px',
borderRadius: '5px'
}
}
}
function PhoneBookForm({ addEntryToPhoneBook }) {
return (
<form onSubmit={e => { e.preventDefault() }} style={style.form.container}>
<label>First name:</label>
<br />
<input
style={style.form.inputs}
className='userFirstname'
name='userFirstname'
type='text'
/>
<br/>
<label>Last name:</label>
<br />
<input
style={style.form.inputs}
className='userLastname'
name='userLastname'
type='text'
/>
<br />
<label>Phone:</label>
<br />
<input
style={style.form.inputs}
className='userPhone'
name='userPhone'
type='text'
/>
<br/>
<input
style={style.form.submitBtn}
className='submitButton'
type='submit'
value='Add User'
/>
</form>
)
}
function InformationTable(props) {
return (
<table style={style.table} className='informationTable'>
<thead>
<tr>
<th style={style.tableCell}>First name</th>
<th style={style.tableCell}>Last name</th>
<th style={style.tableCell}>Phone</th>
</tr>
</thead>
</table>
);
}
function Application(props) {
return (
<section>
<PhoneBookForm />
<InformationTable />
</section>
);
}
ReactDOM.render(
<Application />,
document.getElementById('root')
);
解决方案
const { useState, useRef } = React
const style = {
table: {
borderCollapse: 'collapse'
},
tableCell: {
border: '1px solid gray',
margin: 0,
padding: '5px 10px',
width: 'max-content',
minWidth: '150px'
},
form: {
container: {
padding: '20px',
border: '1px solid #F0F8FF',
borderRadius: '15px',
width: 'max-content',
marginBottom: '40px'
},
inputs: {
marginBottom: '5px'
},
submitBtn: {
marginTop: '10px',
padding: '10px 15px',
border:'none',
backgroundColor: 'lightseagreen',
fontSize: '14px',
borderRadius: '5px'
}
}
}
function PhoneBookForm({ addEntryToPhoneBook }) {
const name = useRef(null);
const lastName = useRef(null);
const phone = useRef(null);
return (
<form onSubmit={e => {
e.preventDefault();
console.log("pozzo");
addEntryToPhoneBook(prev => ([...prev, { userFirstName: name.current.value, userLastName: lastName.current.value, userPhone: phone.current.value }]))
}} style={style.form.container}>
<label>First name:</label>
<br />
<input
style={style.form.inputs}
className='userFirstname'
name='userFirstname'
ref={name}
type='text'
/>
<br/>
<label>Last name:</label>
<br />
<input
style={style.form.inputs}
className='userLastname'
name='userLastname'
ref={lastName}
type='text'
/>
<br />
<label>Phone:</label>
<br />
<input
style={style.form.inputs}
className='userPhone'
name='userPhone'
ref={phone}
type='text'
/>
<br/>
<input
style={style.form.submitBtn}
className='submitButton'
type='submit'
value='Add User'
/>
</form>
)
}
function InformationTable({ phoneBook }) {
return (
<table style={style.table} className='informationTable'>
<thead>
<tr>
<th style={style.tableCell}>First name</th>
<th style={style.tableCell}>Last name</th>
<th style={style.tableCell}>Phone</th>
</tr>
</thead>
<tbody>
{phoneBook.map(el => (
<tr>
<td>{el.userFirstName}</td>
<td>{el.userLastName}</td>
<td>{el.userPhone}</td>
</tr>
))}
</tbody>
</table>
);
}
function Application(props) {
const [book, setBook] = useState([{ userFirstName: "toto", userLastName: "tozzi", userPhone: "0982798736" }]);
return (
<section>
<PhoneBookForm addEntryToPhoneBook={setBook} />
<InformationTable phoneBook={book} />
</section>
);
}
ReactDOM.render(
<Application />,
document.getElementById('test')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="test"></div>
您需要使用在 PhoneBookForm 和 InformationTable 之间共享的状态:
const [book, setBook] = useState([]) // empty array for initialization
return (
<section>
<PhoneBookForm addToPhoneBook={setBook} />
<InformationTable phoneBook={book} />
</section>
);
然后在 PhoneBookForm 中,您将在 onSubmit 期间添加状态内的所有信息:
function PhoneBookForm({ addToPhoneBook }) {
return (
<form onSubmit={e => {
e.preventDefault();
addToPhoneBook((prev) => [...prev, { userFirstName: ........ }]);
// here I used a function inside the setState to get access to the previous value of
// the state, if you're not confortable with this i encourage you to look at spread
// operator and the doc of useState
}} style={style.form.container}>
{...}
</form>
)
}
最后,您可以使用图书道具上的地图功能构建您的表格:
function InformationTable({ phoneBook }) {
return (
<table style={style.table} className='informationTable'>
<thead>
<tr>
<th style={style.tableCell}>First name</th>
<th style={style.tableCell}>Last name</th>
<th style={style.tableCell}>Phone</th>
</tr>
</thead>
<tbody>
{phoneBook.map(el => (
<tr>
<td>{el.userFirstName}</td>
<td>{el.userLastName}</td>
<td>{el.userPhone}</td>
</tr>
)}
</tbody>
</table>
);
}
推荐阅读
- sql-server - SQL Server DTSWizard.exe 导入和导出向导 clr.dll 访问冲突
- amazon-web-services - 为什么启动脚本无法在 AWS EC2 实例中显示 Hello World
- sql - SQL如何统计第一个小时的订单数
- excel - 当其他行满足条件时返回所有行值?
- javascript - 更改从内置数组扩展的对象的控制台日志记录名称
- java - 使用 ProcessBuilder 输出到文件的 Bash 命令不起作用
- node.js - Webpack 无法解析节点模块包中的 baseUrl
- image - 包含 2 次协议:// 的图像 URL 的行为是什么?
- powershell - 禁止从另一个 Powershell 脚本调用的 Powershell 脚本的所有输出
- reactjs - 如何避免使用三元运算符时无法执行 React 状态更新错误