javascript - 尝试保存对象/数组时出现 React JS 问题

问题描述

希望有人可以帮助我。:(

随附的屏幕截图显示了我的问题。请注意背景中的签名和姓名

我使用 react-signature-canvas (Signature Pad Fork) 将签名作为数据 URL 字符串写入我的数据库。

只要我在使用“保存”按钮提交之前单击“修剪”按钮，这就很完美了。

我试图调整我的代码并将 TRIM 函数嵌入到 handleSave 函数中。据我了解，这应该是完全相同的，我应该能够摆脱在保存之前手动按下修剪按钮的步骤。

不幸的是，这不起作用。因此，如果我在不按 TRIM 按钮的情况下输入详细信息和签名并直接按保存（无论如何都会运行 TRIM 功能），会发生以下情况：

第一个条目没有签名。第二个条目得到第一个人的签名。第三个条目得到第二个人的签名。

所以第一个条目的签名每次都被跳过。

我真的不知道问题出在哪里，希望你能帮助我。

非常感谢你们！

...
import SignatureCanvas from 'react-signature-canvas';

class AddPerson extends Component {

    state = {
        open: false,
        trimmedDataURL: null,
    };

    sigPad = {
        width: 500,
        height: 200,
    };

    handleClickOpen = () => {
        // Opens the popup modal window
        this.setState({ open: true });
    };

    clear = () => {
        // Clears the signature pad / input field for signature
        this.sigPad.clear()
    };

    trim = () => {
        this.setState({ trimmedDataURL: this.sigPad.getCanvas().toDataURL('image/png') });
    };

    handleChange = name => event => {
        this.setState({
            [name]: event.target.value,
        });
    };



    handleClose = (e) => {
        // Close the popup modal window
        this.setState({ open: false });
    };

    handleSave = () => {
        var { trimmedDataURL } = this.state;

        this.trim(); /* This runs the TRIM function */

        var NewPerson = [{
            Firstname: this.state.addPersonFirstname,
            Lastname: this.state.addPersonLastname,
            Birthday: this.state.addPersonBirthday,
            SigImage: this.state.trimmedDataURL
        }];

        // Get previous Persons from Storage and write to a PreviousPersons - Callback version
        localforage.getItem('persons', function (err, PreviousPersons) {

            // Create combined var with PreviousPersons and NewPerson - Start
            var CombinedPersons
            if (PreviousPersons === null) {
                CombinedPersons = NewPerson
            } else {
                CombinedPersons = [...PreviousPersons, ...NewPerson]
            }
            // Create combined var with PreviousPersons and NewPerson - End

            // Write CombinedPersons to storage - Start
            localforage.setItem('persons', CombinedPersons)
                .then(function (value) {
                    // Do other things once the value has been saved.
                    console.log(CombinedPersons);
                }).catch(function (err) {
                    // This code runs if there were any errors
                    console.log(err);
                })
            // Write combined list to storage - End

        })
    };



    render() {
        var { trimmedDataURL } = this.state;
        return (
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                <Button mini color="inherit" aria-label="Add" onClick={this.handleClickOpen}>
                    <AddIcon />
                </Button>

                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="form-dialog-title"
                >

                    <DialogTitle id="form-dialog-title" align='center'>Add a Person</DialogTitle>

                    <Divider variant="middle" style={{ marginBottom: 25 }} />

                    <DialogContent>

                        <DialogContentText>Please enter details:</DialogContentText>

                        <TextField
                            id="addPersonFormFirstname"
                            label="Vorname"
                            type="string"
                            onChange={this.handleChange('addPersonFirstname')}
                            style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25 }}
                            margin="dense"
                        />

                        <TextField
                            id="addPersonFormLastname"
                            label="Nachname"
                            type="string"
                            onChange={this.handleChange('addPersonLastname')}
                            style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25 }}
                            margin="dense"
                        />

                        <TextField
                            id="addPersonFormBirthday"
                            label="Geburtsdatum"
                            type="date"
                            onChange={this.handleChange('addPersonBirthday')}
                            style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 25, paddingTop: 5 }}
                            defaultValue="2019-01-01"
                            InputLabelProps={{ shrink: true }}
                            margin="dense"
                        />

                        <Divider variant="middle" style={{ marginBottom: 25 }} />

                        <div className={styles.container}>
                            <div className={styles.sigContainer}>
                                <SignatureCanvas backgroundColor='rgba(246,246,246,1)' penColor='navy' canvasProps={{ className: styles.sigPad }} ref={(ref) => { this.sigPad = ref }} />
                            </div>
                            <div>
                                <button className={styles.buttons} onClick={this.clear}>Clear</button>
                                <button className={styles.buttons} onClick={this.trim}>Trim</button>
                            </div>
                            {this.state.trimmedDataURL ? <img alt="Signature" className={styles.sigImage} src={this.state.trimmedDataURL} /> : null}
                        </div>

                    </DialogContent>

                    <DialogActions>
                        <Button onClick={this.handleClose} variant="contained" color="default">Close</Button>
                        <Button onClick={this.handleSave} variant="contained" color="primary">Save</Button>
                    </DialogActions>

                    <Divider variant="middle" style={{ marginBottom: 25 }} />

                </Dialog>
            </div>
        );
    }


}

export default AddPerson;

标签： javascriptreactjs

javascript - 尝试保存对象/数组时出现 React JS 问题 - Canvas Signature Pad

问题描述

解决方案

推荐阅读