时间戳

首页 > 解决方案 > 从通过连接设置的道具维护本地状态的表单数据的草稿副本？

javascript - 从通过连接设置的道具维护本地状态的表单数据的草稿副本？

问题描述

我在 Typescript 中编写了一个简单的 React 组件，它通过连接到组件道具接受 Redux 状态数据，以允许用户编辑他们的个人资料信息。Redux 状态下的配置文件状态要大得多，并且包含用户不可编辑的字段。

我不想将输入字段直接绑定到 redux 状态，因为我希望它们在状态更新之前“保存”，因此我需要某种本地状态。这些字段还需要具有状态才能进行实时验证等。

我似乎无法想出将当前状态值输入字段然后允许用户更改它们而不更新 redux 状态的方法，直到用户点击“保存”。

我的代码如下：

import * as React from 'react';
import { connect } from 'react-redux';
import { ApplicationState } from './../../store';
import * as ProfileState from './../../store/Profile';

// At runtime, Redux will merge together...
type ProfileEditorProps =
    EditableProfileProps        // ... state we've requested from the Redux store
    & typeof ProfileState.actionCreators      // ... plus action creators we've requested

/** Subset of state fields mapped onto props via connect */
interface EditableProfileProps {
    firstName: string,
    lastName: string
}

// Defines state that matches the props def
interface ModifiedProfileState extends EditableProfileProps { }

class UserProfileEditor extends React.Component<ProfileEditorProps, ModifiedProfileState> {

    constructor(props)
    {
        super(props);
        this.handleFieldContentChange = this.handleFieldContentChange.bind(this);
        this.state = { firstName: '', lastName: ''} as ModifiedProfileState;
    }

    // updates the user's profile
    saveChanges() {
        // fire action to update redux state with new values
    }

    handleFieldContentChange(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState( {...this.state, [e.target.name] : e.target.value});
    }

    public render() {
        return (
            <div>
                <div className="col-md-3">
                </div>
                <div className="form-horizontal col-md-9">
                    <div className="form-group"><label className="col-sm-2 control-label">First Name</label>
                        <div className="col-sm-7"><input type="text" name="firstName" onChange={ this.handleFieldContentChange } value={this.state.firstName} className="form-control" /></div>
                    </div>
                    <div className="form-group"><label className="col-sm-2 control-label">Last Name</label>
                        <div className="col-sm-7"><input type="text" name="lastName" onChange={ this.handleFieldContentChange } value={this.state.lastName} className="form-control" /></div>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-8 col-sm-offset-2">
                            <button className="btn btn-default" type="submit">Cancel</button>
                            <button className="btn btn-primary"  type="submit">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    (state: ApplicationState) => state.profile as EditableProfileProps, // Use editable props def when pulling from state
    ProfileState.actionCreators                                         // Get action creators
)(UserProfileEditor) as any;

标签： javascriptreactjstypescriptredux

解决方案

props我相信如果您仅将其用作输入的“种子数据”，那么在构造函数中设置初始状态是完全可以的。通过在您的构造函数中设置它，它只是将其设置为初始状态而不绑定它。组件中的状态仍将受到控制，但独立于 Redux，因此您可以自由修改它，然后在用户单击“保存”时将其作为有效负载分派。

this.state = { firstName: props.firstName, lastName: props.lastName} as ModifiedProfileState;

推荐阅读