Question

我有一个noteApp。这个程序创建一个新的笔记，更新笔记，删除笔记并完成笔记。每个便笺都有一个完整的按钮，编辑按钮和删除按钮。

当我单击一个便笺上的完成按钮时，它会触及笔记中的文本，禁用编辑按钮，还将完成按钮更改为撤消完成按钮。

单击笔记的完成按钮时遇到问题。当我单击完成时，它会触击应用程序中的所有注释。我只希望删除该音符。

我的代码：
帖子组件：

        import React , {Component} from 'react';
        import axios from 'axios';
        import Post from '../../components/Post/Post';


        class Posts extends Component {

            state = {
                posts: [],
                error: false,
                strikeThrough:false
            }

            fetchNotes = () =>{

                axios.get( 'http://localhost:3001/notes' )
                    .then( response => {
                        //console.log(response.data);
                        const posts = response.data;
                        this.setState({posts: posts});

                    } )
                    .catch(error => {

                        this.setState({error: true});
                    });
            }

            componentDidMount () {
                this.fetchNotes();
            }



            completeHandler =()=>{
            if(this.state.strikeThrough){
                this.setState({strikeThrough:false})
            }else{
                this.setState({strikeThrough:true})
            }
            }


            render(){

                let posts = <p>Something went wrong!</p>;
                if(this.state.posts.length === 0){
                    posts =<p>Oops no post to show...</p>
                }else if (!this.state.error) {
                    posts = this.state.posts.map(post => {
                        //console.log(post._id);
                        return <Post key={post._id} 
                            title={post.title} 
                            text={post.text}
                            id={post._id}
                            fetchNotes={this.fetchNotes}
                            edit={() => this.props.history.push(`${'/update-note/'}${post._id}`)}
                            **complete = {()=>this.completeHandler(post._id)}**
                            striked={this.state.strikeThrough}

                          />;
                    });
                }

                return(
                    <div>
                        {posts}
                    </div>
                )
            }
        }

        export default Posts;


**Post Component:**

import React from 'react';
import classes from './Post.css';
import axios from 'axios';




const post = (props) => {
    return(
        <article className={classes.Post}>
        <h3  style={{ textDecorationLine: props.striked ? 'line-through': null }}>{props.title}</h3>
        <p style={{ textDecorationLine: props.striked ? 'line-through': null }}>{props.text}</p>
        <button onClick={props.complete}>{props.striked ? 'Undo Complete' : 'Complete'}</button>
       <button onClick={props.edit} disabled={props.striked} >Edit</button>
        <button  
    onClick={()=>{
        axios.delete('http://localhost:3001/notes/' + props.id)
        .then(response=>{
            console.log(response.data);
            props.fetchNotes();
        }).catch(e=>{
            console.log(e);
        })
    }}

        >Delete</button>
    </article>
    );
}

export default post;

我应该在completeHandler函数中写些什么，以便只有我注意该注释。（在当前的completeHandler中，我将状态设置为strikeThrough：true，因为我在Post Component中添加了样式）。有人可以帮助澄清我的问题。我只希望不是所有笔记都删除了

Answer 1

您的Posts组件需要具有array中的strikeThrough，以便每个post都具有对应的strikeThrough。下面的代码实现了这一点：

        import React , {Component} from 'react';
        import axios from 'axios';
        import Post from '../../components/Post/Post';


        class Posts extends Component {

            state = {
                posts: [],
                error: false,
                strikeThrough: [],  //will contain strikeThrough state of each Post
            }

            fetchNotes = () =>{

                axios.get( 'http://localhost:3001/notes' )
                    .then( response => {
                        //console.log(response.data);
                        const posts = response.data;
                        this.setState({posts: posts});
                        this.setState({ strikeThrough: Array(posts.length).fill(false) }) //initialize strikeThrough Array
                    } )
                    .catch(error => {

                        this.setState({error: true});
                    });
            }

            componentDidMount () {
                this.fetchNotes();
            }



            completeHandler = (index) => {
            strikeArrClone = this.state.strikeThrough.slice(); //create clone of strikeThrough Array
            strikeArrClone[index] = !strikeArrClone[index];
            this.setState({ strikeThrough: strikeArrClone })
            }


            render(){

                let posts = <p>Something went wrong!</p>;
                if(this.state.posts.length === 0){
                    posts =<p>Oops no post to show...</p>
                }else if (!this.state.error) {
                    posts = this.state.posts.map((post, index)=> {
                        //console.log(post._id);
                        return <Post key={post._id} 
                            title={post.title} 
                            text={post.text}
                            id={post._id}
                            fetchNotes={this.fetchNotes}
                            edit={() => this.props.history.push(`${'/update-note/'}${post._id}`)}
                            complete = {()=>this.completeHandler(index)}
                            striked={this.state.strikeThrough[index]}

                          />;
                    });
                }

                return(
                    <div>
                        {posts}
                    </div>
                )
            }
        }

        export default Posts;

当我点击React

1 个答案: