Как я могу получить реквизиты, автоматически заполняющие ввод моей формы в ответ? - PullRequest
Новая
       36

Как я могу получить реквизиты, автоматически заполняющие ввод моей формы в ответ?

0 голосов
/ 28 февраля 2020

Я создаю форум в React и пытаюсь внедрить функцию комментариев для каждого сообщения.

Внутри компонента Post я отображаю комментарии и форму одновременно, например: 

<ol class="border">{this.props.post.user.name} says: <br></br>
  <ul
    onMouseOver={() => this.handleClick()}
    class="border rounded p-3 mb-2 bg-white text-dark lead" >
    {this.props.post.post}
    <button type="button" class="btn btn-danger" onClick={() => this.props.handleDelete(this.props.post)}>
      Delete
    </button>
  </ul>
  <span onClick={() => this.props.onClick(this.props.post)}>
    ❤️: {this.props.post.likes.length}
  </span>
  <ToggleDisplay show={this.state.show}>
    <li > Comments: 
      {this.props.post.comments.map(comment =>
        <Comment key={comment.id} post={this.props.post.id} comment={comment} />)}
    </li><br></br>
    <div>
      <CommentForm post={this.props.post.id} handleSubmit={this.props.addComment} />
    </div>
  </ToggleDisplay>
</ol>

И вот как выглядит мой commentForm: 

class CommentForm extends React.Component {

  state = {
    post: "",
    comment: ""
  }

  handleInputChange = (evt) => {
    const value = evt.target.value;
    const name = evt.target.name;

    // this.input = React.createRef()

    this.setState({
      [name]: value,
      // post: this
    })
  }

  render() {
    console.log(this.state)
    return <div>{
      <form onSubmit={(evt) => this.props.handleSubmit(evt, this.state)}>
        <option name="post" defaultValue={this.props.post} onChange={this.handleInputChange}></option>
        <label> Add a comment: </label>
        <input type="text" name="comment" value={this.state.comment.comment} onChange={this.handleInputChange}></input>
        <button type="submit" value="submit">submit</button>
      </form>
    }</div>
  }
}

export default CommentForm;

Я хочу, чтобы форма автоматически распознавала и заполняла идентификатор сообщения и отправляла его в состояние, чтобы я могла отправить его обратно в рендеринг через родительский компонент, но мне трудно найти направления, как это сделать в Интернете.

Любая помощь оценена, спасибо! :)

...