将组件拆分为较小的组件反应

Question

React 告诉我们尽可能多地将代码划分为组件。 我有所有这些代码，我有一个表格，其中有一个按钮，可以打开一个对话框来输入数据并使用handleChange函数保存它们，但是将所有这些放在一起，会产生数据输入非常慢。

使用 handleChange 函数，将处理设置对象状态的挂钩窗体输入样式的 OnChange 事件。

如果我制作一个控制台.log该值会向我显示我输入的完整值，但在 9 的状态下，我缺少本例中的最后一个字符

alias 123 456 789
State {"code":530,"email":"","alias":"123 456 78"}

我想要实现的是将表和对话框分成两个不同的组件

如何将表与对话框分开？

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import {TextField,Button} from '@material-ui/core';
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import  axios  from 'axios';

export default function dialog(props){ 

const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const initialState={code:0, email:'', alias:''}
const[subscription, setSubscription]=useState(initialState);
const handleChange=(event)=>{
setSubscription({...subscription,[event.target.name]:event.target.value})
}
const handleSubmit=(event)=>{
event.preventDefault();
if(!subscription.code || !subscription.email || !subscription.alias) 
return
const postSubscription=async()=>{
try {
axios.post('/api/Subscription/add',subscription);
props.history.push('/Subscription'); 
}
catch (error) {
console.log('error', error);
}
}
postSubscription();
} 

const[user, setUser]= useState({Users:[]});
useEffect(()=>{
const getUser=async()=>{
const response =await axios.get('/api/users');
setUser(response.data);
console.log(response.data)
}
getUser();
},[]);
return(
<div>
<MaterialTable
title="Users"
columns={[
{ title: 'Code', field: 'code' , type: 'numeric'},
{ title: 'Name', field: 'name' },
{ title: 'Lastname', field: 'lastname' },
{ title: 'Age', field: 'age', type: 'numeric'},
]}
data={user.Users}
actions={[
{
icon: 'account_box',
tooltip: 'Add subscription',
onClick:()=>{ handleClickOpen()}
}
]}
/>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Subscription></DialogTitle>
<DialogContent>
<DialogContentText>
Subscription
</DialogContentText>
<form onSubmit={handleSubmit} >
<TextField
id="filled-name"
name="code"
label="Code"
value={subscription.code}
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<TextField
id="filled-name"
label="Email"
value={subscription.email}
name="email"
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<TextField
id="filled-multiline-static"
label="Alias"
value={subscription.alias}
name="alias"
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<Button
variant="contained"
color="primary"
type="submit">
Add
</Button>
</form>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

好吧，尽管我发表了评论，我将尝试解释我将如何评估这种情况。

这只是我自己的

想法，源于我自己的经验。这并不意味着，这是唯一或最好的方法。

我会从内到外。我会为以下对象创建一个可重用的组件：

1. 对话
2. 桌子

目前为止，一切都好。就像你想的那样。最重要的是，我会将所有提交处理程序和相关代码移动到该组件(对话框(。像这样的事情：

// This functions and all its dependancies, have nothing to do with the Table.
- handleClose
- handleChange
- open 

我还会将数组传递给<TextField />组件，以最大程度地减少渲染中的代码，并使用 ES6map如下所示：

<Fragment>
{TextFields.map(
(field: ITextField):ReactNode => (
<Fragment key={field.name}>{this.renderTextField(field)}</Fragment>
))}
</Fragment>

有了上述内容，您的render()将更具可读性，并且您将来可以更轻松地扩展表单。You just add more elements to the Array.

作为最后一步，我只在父组件中调用对话框和表组件。以防万一我需要操作数据，来自这两个组件的各种来源(Redux - LocalComponentState(。例：

export default class ParentComponent extends Component {
// State
// Props
render() {
<TableComponent propsForTableComponent={propsForTableComponent} />
<DialogComponent propsForDialogComponent={propsForDialogComponent} />
}
}

同样，不确定你所说的慢是什么意思。但是，如果我能提供更多帮助，请询问。希望我有帮助。