我想在我的路由组件中添加一个表单元素

Question

我是新来的，我有这个路由组件，在这个里面我正在创建我的新数据的每一行的元素，但我也想添加表单，以便用户可以创建一个新的段落。有人可以帮我吗？？import React, { Component } from 'react';import axios from 'axios';class Comments extends Component {state={    Comment:[]}componentDidMount() {    const { commentId }=this.props.location.state;    axios.get(`./hn_data/${commentId}.json`)        .then((res) => this.setState({ Comment: res.data }));}render() {    console.log(this.state.Comment);    return this.state.Comment.map(comment=>(        <p>{comment.text}</p>    ))}}export default Comments;`

Answer 1

就我所知，您想添加一个用于提交新评论的表单，请写信？

尝试这个：

import React, { Component } from 'react';

import axios from 'axios';

class Comments extends Component {

    state = {

        Comment: [],

        commentText: "",

    };

    componentDidMount() {

        const { commentId } = this.props.location.state;

        axios.get(`./hn_data/${commentId}.json`)

            .then((res) => this.setState({ Comment: res.data }));

    }

    postComment() {

        // add you comment to the database here

    }

    onCommentTextChange(event) {

        this.setState({

            commentText: event.currentTarget.value,

        });

    }

    renderComments() {

        return this.state.Comment.map(comment=>(

            <p>{comment.text}</p>

        ));

    }

    renderForm() {

        return (

            <div class="comment-form">

                <textarea

                    class="comment-form__text" 

                    value={this.state.newCommentText}

                    onChange={(event) => this.onCommentTextChange(event)}

                ></textarea>

                <button onClick={() => this.postComment()}>Submit</button>

            </div>

        )

    }

    render() {

        console.log(this.state.Comment);

        return (

            <div>

                {this.renderComments()}

                {this.renderForm()}

            </div>

        )

    }

}

export default Comments;

在 postComment 中，您可以将 this.state.commentText 添加到 state.Comment 中或发布到后端。