Как редактировать форму в React и Redux? - PullRequest
Новая
       29

Как редактировать форму в React и Redux?

0 голосов
/ 03 апреля 2020

Я попытался автозаполнить поля ввода значений. Итак, я отправил id через параметры из компонента Cards в компонент EditForm, а в EditForm, в его componentDidMount (), я использовал это id и получил сообщение по id из базы данных. получил почту из магазина и вытащил title и description. Итак, я сделал свою форму предварительно заполненной значениями, которые я получил из магазина. Теперь я застрял здесь. Как мне отредактировать эту форму? С этими значениями, которые я установил в свойстве value поля ввода, очевидно, что я ничего не могу напечатать, потому что я хотел сделать его предзаполнением. Теперь я думаю, что мой подход был неверным. Пожалуйста, помогите.

Cards

import React, { Component } from "react"

class Cards extends Component {

  handleEdit = _id => {
    this.props.history.push(`/post/edit/${_id}`)
  }

  render() {
    const { _id, title, description } = this.props.post
    return (
      <div className="card">
        <div className="card-content">
          <div className="media">
            <div className="media-left">
              <figure className="image is-48x48">
                <img
                  src="https://bulma.io/images/placeholders/96x96.png"
                  alt="Placeholder image"
                />
              </figure>
            </div>
            <div className="media-content" style={{ border: "1px grey" }}>
              <p className="title is-5">{title}</p>
              <p className="content">{description}</p>
              <button onClick={() => {this.handleEdit(_id)}} className="button is-success">
                Edit
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


export default Cards

EditForm

import React, { Component } from "react";
import { connect } from "react-redux";
import { getPost } from "../actions/userActions"

class EditForm extends Component {

  componentDidMount() {
    const id = this.props.match.params.id
    this.props.dispatch(getPost(id))
  }


  handleChange = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    })
  };


  render() {
    return (
      <div>
        <input
          onChange={this.handleChange}
          name="title"
          value={this.props.post.post.title}
          className="input"
          placeholder="Title"
        />

        <textarea
          onChange={this.handleChange}
          name="desctiption"
          value={this.props.post.post.description}
          className="textarea"
        ></textarea>

        <button>Submit</button>
      </div>
    );
  }
}

const mapStateToProps = store => {
  return store;
};

export default connect(mapStateToProps)(EditForm)

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020 
import React, { Component } from "react";
import { connect } from "react-redux";
import { getPost } from "../actions/userActions"

class EditForm extends Component {
    constructor() {
    super();
    this.state = {
      title: '',
      description: ''
    };
  componentDidMount() {
    const id = this.props.match.params.id
    this.props.dispatch(getPost(id))
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.post !== this.props.post) {
      this.setState({
       title: nextProps.post.post.title,
        description: nextProps.post.post.description,
      });
    }
  }
  handleChange = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    })
  };

  render() {
    const { title, description } = this.state
    return (
      <div>
        <input
          onChange={this.handleChange}
          name="title"
          value={title}
          className="input"
          placeholder="Title"
        />

        <textarea
          onChange={this.handleChange}
          name="description"
          value={description}
          className="textarea"
        ></textarea>

        <button>Submit</button>
      </div>
    );
  }
}

const mapStateToProps = store => {
  return store;
};

export default connect(mapStateToProps)(EditForm)
0 голосов
/ 03 апреля 2020

определить 2 заголовка и описания состояния и установить их после того, как вы их потянули. Затем обновите состояние с помощью функции onchange и передайте состояние в качестве значения для ввода и textarea

...