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

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 {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; Comment: [],&nbsp; &nbsp; &nbsp; &nbsp; commentText: "",&nbsp; &nbsp; };&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; const { commentId } = this.props.location.state;&nbsp; &nbsp; &nbsp; &nbsp; axios.get(`./hn_data/${commentId}.json`)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) => this.setState({ Comment: res.data }));&nbsp; &nbsp; }&nbsp; &nbsp; postComment() {&nbsp; &nbsp; &nbsp; &nbsp; // add you comment to the database here&nbsp; &nbsp; }&nbsp; &nbsp; onCommentTextChange(event) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; commentText: event.currentTarget.value,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; renderComments() {&nbsp; &nbsp; &nbsp; &nbsp; return this.state.Comment.map(comment=>(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{comment.text}</p>&nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp; }&nbsp; &nbsp; renderForm() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="comment-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="comment-form__text"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.newCommentText}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(event) => this.onCommentTextChange(event)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.postComment()}>Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.state.Comment);&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.renderComments()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.renderForm()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default Comments;在 postComment 中，您可以将 this.state.commentText 添加到 state.Comment 中或发布到后端。