Установка родительского состояния после дочернего рендеринга в React - PullRequest
Новая
       4

Установка родительского состояния после дочернего рендеринга в React

0 голосов
/ 12 марта 2020

Я работаю над проектом библиотеки. Пользователи могут добавлять книги в библиотеку. Итак, я создал форму для добавления книги. Форма содержит имя, автора, издателя, страницы, ISBN и информационные поля. Я создал раскрывающийся компонент для авторов и издателей, чтобы пользователь мог выбрать из этого компонента: 

import AuthorsService from './AuthorsService'

const authorsService = new AuthorsService();

class AuthorsDropDown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            authors: [],
        };
    }
    componentDidMount() {
        var self = this;
        authorsService.getAuthors().then(function (result) {
            self.setState({ authors: result});
        });
    }

    render() {
        return (
            <div className="form-group col-sm-4">
            <label>Author:</label>
            <select className="form-control" onChange={(ev) => this.props.onChange(ev.target.value)}>
            {this.state.authors.map( a  => 
                    <option key={a.id} value={a.id}>{a.first_name + ' '+a.last_name }
                    </option>)
            }
            </select>
            </div>
        );
    }


}
export default AuthorsDropDown;

Я назначил начальное значение для полей author.id и publisher.id в родительском компоненте как нулевое, но эти поля получили свои значения только после выпадающих изменений (т.е. после запуска onChange). Я понятия не имею, как установить значение для них при рендеринге (то есть состояние инициализации). Вот родительский компонент: 

import React, { Component } from "react";
import BookService from "./BooksService";
import AuthorsDropDown from "./AuthorsDropDown";
import PublishersDropDown from "./PublishersDropDown";
const bookService = new BookService();


class BookCreateUpdate extends Component {


  constructor(props) {
    super(props);

    this.state = {
      author:{id:null},
      publisher:{id:null}
    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.onChangeAuthor = this.onChangeAuthor.bind(this);
    this.onChangePublisher = this.onChangePublisher.bind(this);
  }

    onChangeAuthor(new_author_id){
      this.setState({author:{id:new_author_id}});
    }

    onChangePublisher(new_publisher_id){
      this.setState({publisher:{id:new_publisher_id}});
    }

  handleCreate() {
    alert(this.state.author.id);
    bookService
      .createBook({
        name: this.refs.name.value,
        author: this.state.author,
        publisher: this.state.publisher,
        page: this.refs.pages.value,
        inventor_number: this.refs.inventor_number.value,
        description: this.refs.description.value
      })
      .then(result => {
        alert("The book is added!");
      })
      .catch(() => {
        alert("Error!!");
      });
  }

  handleUpdate(pk) {
    bookService
      .updateBook({
        pk: pk,
        name: this.refs.name.value,
        author: this.refs.author,
        publisher: this.refs.publisher,
        pages: this.refs.pages.value,
        description: this.refs.description.value
      })
      .then(result => {
        console.log(result);
        alert("Success");
      })
      .catch(() => {
        alert("Error.");
      });
  }

  handleSubmit(event) {
    const {
      match: { params }
    } = this.props;
    if (params && params.pk) {
      this.handleUpdate(params.pk);
    } else {
      this.handleCreate();
    }
    event.preventDefault();
  }

  render() {

    return (
      <form onSubmit={this.handleSubmit}>
          <div className="row">
            <div className="form-group  col-sm-8">
              <label>Name:</label>
              <input
                className="form-control"
                type="text"
                ref="name"/>
            </div>
          </div>
          <div className="row">
            <AuthorsDropDown onChange={this.onChangeAuthor}/>
            <PublishersDropDown onChange={this.onChangePublisher}/>
          </div>
          <div className="row">
            <div className="form-group col-sm-4">
              <label>Pages:</label>
              <input
                className="form-control"
                type="number"
                ref="pages"/>
            </div>
            <div className="form-group  col-sm-4">
              <label>ISBN:</label>
              <input
                className="form-control"
                type="text"
                ref="inventor_number"/>
             </div>
             </div>
            <div className="row">
              <div className="form-group col-sm-4">
                <label>Info:</label>
                <textarea
                  className="form-control"
                  ref="description"/>
              </div>
            </div>
            <input className="btn btn-primary" type="submit" value="ok"/>
      </form>
    );
  }

}
export default BookCreateUpdate;

1 Ответ

0 голосов
/ 13 марта 2020

Я думаю, вы должны рассмотреть другой способ решения этой проблемы. Если я понимаю ваше требование, этот компонент создает и обновляет книги. В этом случае компонент <BookCreateUpdate/> должен получить свойство, которое является целевой книгой. Для создания это должен быть пустой объект. Для обновления это должен быть объект для обновления.

Я думаю, что упомянутая проблема относится к редактированию. Я полагаю, что книги где-то сохранились. Если книга передается в режиме редактирования, то начальное значение должно передаваться дочерним компонентам (input, AuthorsDropDown, PublishersDropDown) от родительского (<BookCreateUpdate/>). 

class BookCreateUpdate extends Component {

  constructor(props) {
    super(props);
    this.state(this.props.book)
  }

 onInputChange = propName => (e) => {
   this.setState({[propName]: e.target.value })
 }

  ...

   handleCreate() {
    const bookDraft = this.state;
    bookService
      .createBook(bookDraft)
      .then(result => {
        alert("The book is added!");
      })
      .catch(() => {
        alert("Error!!");
      });
  }
  ...
  render(){
     const bookDraft = this.state;
     return (
     ...
     <div className="row">
            <div className="form-group  col-sm-8">
              <label>Name:</label>
              <input
                className="form-control"
                type="text"
                value = {bookDraft.name}
                onChange={this.onInputChange('name')}
               />
            </div>
     </div>
     <AuthorsDropDown onChange={this.onChangeAuthor} authorId = {bookDraft.authorId}/>
     <PublishersDropDown onChange={this.onChangePublisher} publisherId = {bookDraft.publisherId}/>
     ....
)
  }
}
BookCreateUpdate.propsTypes = {
  book: PropTypes.object
}
BookCreateUpdate.defaultProp = {
  book: {authorId: null, publisherId: null}
}

Лучше также не использовать ссылки в этом случае. Лучше передать значение для ввода и передать обратный вызов для события onChange.

...