Question

React应该能够编辑映射数组中的一项，但是选择编辑时。它编辑数组中的所有项目。我将如何解决此问题，以便可以针对该特定post.id

进行编辑

例如

我不太确定如何告诉您编辑特定项目的反应，这等同于ID。

PostList.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost} from '../actions/';
import PostItem from './PostItem';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}
class PostList extends Component{
    constructor(props){
        super(props);
        this.state ={
            isEditing:false
        }
    }
    // Return a new function. Otherwise the DeletePost action will be dispatch each
     // time the Component rerenders.
    removePost = (id) => () => {
        this.props.DeletePost(id);
    }
    onChange = (e) => {
        e.preventDefault();
        this.setState({
            [e.target.title]: e.target.value
        })
    }

    formEditing = (id) => ()=> {
        if(this.state.isEditing){
          this.setState({
            isEditing: false
          });
        }

        else{
          this.setState({
            isEditing:true
          })
        }
    }

    render(){
        const {posts, editForm, isEditing, editChange} = this.props;
        return (
            <div>
                {posts.map((post, i) => (
                    <Paper key={post.id} style={Styles.myPaper}>
                        <PostItem editForm={this.formEditing} isEditing={this.state.isEditing} removePost={this.removePost} {...post} />
                    </Paper>
                ))}
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch) => ({
    // Pass id to the DeletePost functions.
    DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(null, mapDispatchToProps)(PostList);

PostItem.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}

const PostItem = ({ title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange}) => {
    return(
         <div>
                <Typography variant="h6" component="h3">
                {/* if else teneray operator */}
                {/* when edit is clicked all items reveal an input field when it should just be the item that has */}
                {isEditing ? (
                    <Editable editField={title} onChange={editChange}/>
                ): (
                    <div>
                        {title}
                    </div>    
                )}         
                </Typography>
                <Typography component="p">
                    {post_content}
                    <h5>
                        by: {username}</h5>
                    <Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
                </Typography>
                {!isEditing ? (
                    <Button variant="outlined" type="submit" onClick={editForm(id)}>
                        Edit
                    </Button>
                ):(
                    <Button variant="outlined" type="submit" onClick={editForm(id)}>
                        Update
                    </Button>
                )}
                <Button
                    variant="outlined"
                    color="primary"
                    type="submit"
                    onClick={removePost(id)}>
                    Remove
                </Button>

        </div>
    )




}

export default PostItem;

Answer 1

在regexp_matches中：

首先将您的初始状态设置为PostList.js。
- 您现在不编辑任何帖子ID：）
将{ isEditingId: null }更改为以下内容：
```
formEditing
```
- 这将始终将帖子的formEditing = (id) => ()=> { this.setState({ isEditingId: id }); }存储到id属性（是的，我必须将isEditingId更改为isEditing才有意义）
在创建isEditingId映射时，不使用PostItem，现在检查isEditing={this.state.isEditing}是否等于存储在post.id中的帖子ID这个：isEditingId。
- 这将确保isEditing={this.state.isEditingId === post.id}仍作为布尔值传递给isEditing，指示该帖子是否正在编辑。

在PostItem.js中：

当您单击“编辑”按钮时，您已经将PostItem.js中帖子的id传递回了editForm。
现在将“更新”按钮的PostList处理程序更改为onClick。
- 通过此更改，您现在应该在onClick={editForm(null)}中使isEditing等于null，因此您应该看不到任何PostList.js元素。

希望这对ya有用：)由于您没有包含Editable文件，因此测试有点困难，但是希望上面的解释至少可以帮助您走上正确的轨道。

反应更新状态到所有被映射的项目

1 个答案: