Question

React告诉我们将代码尽可能地分成多个部分。我有所有这些代码，有一个表，并且其中有一个按钮，该按钮打开一个对话框以输入数据并使用handleChange函数将其保存，但是所有这些都导致数据输入非常慢。

使用handleChange函数，可以处理设置对象状态的挂钩表单输入样式的OnChange事件。

如果我创建一个console.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

好吧，尽管有我的评论，我还是会尝试解释如何评估这种情况。

这只是我自己的想法，是根据我自己的经验得出的。这并不意味着它是唯一或最好的出路。

我会从内而外走下去。我将为以下对象创建可重复使用的组件：

对话框
表

那么好。就像你想的那样。最重要的是，我将所有SubmitHandlers和相关代码移到该Component（Dialog）。像这样的东西：

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

我也将数组传递给<TextField />组件，以最小化渲染中的代码，并像这样使用ES6 map：

 <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} />
 }
}

再次，不确定您所说的慢。但是，如果我能提供更多帮助，请询问。希望我能帮上忙。

将组件拆分为较小的组件

1 个答案: