Reactjs：使用相同的形式进行添加和更新

Question

我在教程的帮助下制作了一个 reactjs crud 应用程序，现在效果很好。现在我正在尝试将两个表单合并在一起，以便将相同的表单用于add和update操作。

这是我的allpost.js文件

import React, { Component } from 'react';

import { connect } from 'react-redux';

import Post from '../components/Post';

import EditComponent from '../components/editComponent';

class AllPost extends Component {
    render() {
        return (
            <div>
                <h1>All Posts</h1>
                {this.props.posts.map((post) => (
                    <div key={post.id}>
                        {post.editing ? <EditComponent post={post} key={post.id} /> :
                            <Post key={post.id} post={post} />}
                    </div>
                ))}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state
    }
}
export default connect(mapStateToProps)(AllPost);

这是我的 postForm.js 文件：

import React, { Component } from 'react';
import { connect } from 'react-redux'


class PostForm extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const title = this.getTitle.value;
    const message =  this.getMessage.value;
    const data = {
      id: new Date(),
      title,
      message,
      editing: false
    }
    console.log(data)
    this.props.dispatch({
        type: 'ADD_POST',
        data,
    });
    this.getTitle.value = '';
    this.getMessage.value = '';
  }
render() {
return (
<div>
  <h1>Create Post</h1>
  <form onSubmit={this.handleSubmit}>
   <input required type="text" ref={(input)=>this.getTitle = input} 
    placeholder="Enter Post Title"/>
   <br /><br />
   <textarea required rows="5" ref={(input)=>this.getMessage = input} cols="28" 
    placeholder="Enter Post" />
   <br /><br />
   <button>Post</button>
  </form>
</div>
);
}
}
export default connect()(PostForm);

这是我的editComponent.js文件

import React, { Component } from 'react';
import { connect } from 'react-redux';


class EditComponent extends Component {
handleEdit = (e) => {
  e.preventDefault();
  const newTitle = this.getTitle.value;
  const newMessage = this.getMessage.value;
  const data = {
    newTitle,
    newMessage
  }
  this.props.dispatch({ type: 'UPDATE', id: this.props.post.id, data: data })
}
render() {
return (
<div>
  <form onSubmit={this.handleEdit}>
    <input required type="text" ref={(input) => this.getTitle = input}
    defaultValue={this.props.post.title} placeholder="Enter Post Title" /><br /><br />
    <textarea required rows="5" ref={(input) => this.getMessage = input}
    defaultValue={this.props.post.message} cols="28" placeholder="Enter Post" /><br /><br />
    <button>Update</button>
  </form>
</div>
);
}
}
export default connect()(EditComponent);

这是我的 post.js 文件：

import React, { Component } from 'react';
import { connect } from 'react-redux'

class Post extends Component {
  render() {
  return (
    <div>
      <h2>{this.props.post.title}</h2>
      <p>{this.props.post.message}</p>
      <button onClick={() => this.props.dispatch({type: 'EDIT_POST', id: this.props.post.id})}>EDIT
      </button>
      <button onClick={ () => this.props.dispatch({type: 'DELETE_POST', id: this.props.post.id}) }>DELETE
      </button>
    </div>
  );
 }
}
export default connect()(Post);

这是我的postReducer.js文件：

const postReducer = (state = [], action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.concat([action.data]);
      case 'DELETE_POST':
        return state.filter((post)=>post.id !== action.id);
      case 'EDIT_POST':
        return state.map((post)=>post.id === action.id ? {...post,editing:!post.editing}:post)
      case 'UPDATE':
        return state.map((post)=>{
          if(post.id === action.id) {
            return {
               ...post,
               title:action.data.newTitle,
               message:action.data.newMessage,
               editing: !post.editing
            }
          } else return post;
        })
      default:
        return state;
    }
  }
  export default postReducer;

任何人都可以帮助我实现这一目标吗？我尝试了很多使用相同的表单进行添加和更新，但未能实现。

Answer 1

我认为最好为呈现表单 data( FormComponent)创建单独的组件，为 edit( EditComponent) 和 add( AddComponent)创建单独的组件。

这样一来，一个组件中就不会出现混乱，也不会出现不同模式（如edit或add）或未来copy模式中的if/else 条件。

这种方法将增加灵活性并增强反应的组合模式。

1) AddComponent

import React, { Component } from 'react';
import { connect } from 'react-redux'


class AddComponent extends Component {
  handleSubmit = (title, message) => {
    const data = {
      id: new Date(),
      title,
      message,
      editing: false
    }
    this.props.dispatch({
        type: 'ADD_POST',
        data,
    });
  }
    render() {
        return (
            <div>
                <h1>Create Post</h1>
                <FormComponent
                    buttonLabel='Post'
                    handleSubmit={this.handleSubmit}
                />
            </div>
        );
    }
}
export default connect()(AddComponent);

2) EditComponent

import React, { Component } from 'react';
import { connect } from 'react-redux';


class EditComponent extends Component {
    handleSubmit = (newTitle, newMessage) => {
        const data = {
            newTitle,
            newMessage
        }
        this.props.dispatch({ type: 'UPDATE', id: this.props.post.id, data: data })
    }

    render() {
        return (
        <div>
            <FormComponent
                buttonLabel='Update'
                handleSubmit={this.handleSubmit}
            />
        </div>
        );
    }
}
export default connect()(EditComponent);

3) FormComponent

import React, { Component } from 'react';

class FormComponent extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        const title = this.getTitle.value;
        const message =  this.getMessage.value;
        this.props.handleSubmit(title, message);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input required type="text" ref={(input) => this.getTitle = input}
                defaultValue={this.props.post.title} placeholder="Enter Post Title" /><br /><br />
                <textarea required rows="5" ref={(input) => this.getMessage = input}
                defaultValue={this.props.post.message} cols="28" placeholder="Enter Post" /><br /><br />
                <button>{this.props.buttonLabel}</button>
            </form>
        );
    }
}
export default FormComponent;

希望有帮助！！！

Answer 2

您可以使用 editMode 属性创建自己的 Form 组件来控制它是创建还是更新。

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Form extends Component {
    handleSubmit = e => {
        e.preventDefault();
        const {editMode, post} = this.props;
        const title = this.titleRef.value;
        const body = this.bodyRef.value;
        if (editMode){
            const data = {
                title,
                body
            }
            this.props.dispatch({type: 'UPDATE', id: post.id, data})
        }
        else {
            const data = {
                id: new Date(),
                title,
                message,
                editing: false
            }
            this.props.dispatch({type: 'ADD_POST', data});
        }
    }

    render() {
        const {editMode, post} = this.props;
        const pageTitle = editMode ? 'Edit Post' : 'Create Post';
        const buttonTitle = editMode ? 'Update' : 'Post';
        return (
            <div>
                <h1>{pageTitle}</h1>
                <form onSubmit={this.handleSubmit}>
                    <input
                        required
                        type="text"
                        ref={input => this.titleRef = input}
                        placeholder="Enter Post Title"
                        defaultValue={post.title}
                    />
                    <textarea
                        required
                        rows="5"
                        ref={input => this.bodyRef = input}
                        cols="28"
                        placeholder="Enter Post"
                        defaultValue={post.body}
                    />
                    <button>{buttonTitle}</button>
                </form>
            </div>
        );
    }
}

Form.propTypes = {
    editMode: PropTypes.bool,
    post: PropTypes.object
}

Form.defaultProps = {
    editMode: false,    // false: Create mode, true: Edit mode
    post: {
        title: "",
        body: ""
    }    // Pass defined Post object in create mode in order not to get undefined objects in 'defaultValue's of inputs.
}

export default Form;

默认情况下它处于创建模式，但如果您想更新帖子，您应该传递editMode={true}给表单组件。