Установка значения по умолчанию для поля ввода после извлечения данных приводит к тому, что содержимое перекрывается и событие «onChange» не запускается - PullRequest
Новая
       11

Установка значения по умолчанию для поля ввода после извлечения данных приводит к тому, что содержимое перекрывается и событие «onChange» не запускается

0 голосов
/ 29 января 2019

У меня есть компонент «редактировать категорию» в моем приложении React.Идентификатор передается через URL.Когда компонент монтируется, вызывается действие «fetchCategory», которое обновляет реквизиты компонента с текущей категорией.

У меня есть форма, которую я хочу предварительно заполнить, и в настоящее время яиспользуя значение defaultValue для ввода.

Однако это не отражается на состоянии, и метка для текстового поля перекрывает поле ввода.

Любая помощь будет принята с благодарностью.Ниже я оставлю фрагменты своего кода, которые помогут понять, что я пытаюсь сделать. 

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchCategory } from "../../store/actions/categoryActions";

class AddOrEditCategory extends Component {
  componentDidMount() {
    this.props.fetchCategory(this.props.match.params.id);

    if (this.props.match.params.id) {
      this.setState({
        _id: this.props.match.params.id
      });
    }
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };
  render() {
    const addingNew = this.props.match.params.id === undefined;

    return (
      <div className="container">
        <h4>{addingNew ? "Add category" : "Edit category"}</h4>
        <form onSubmit={this.handleSubmit}>
          <div className="input-field">
            <input
              type="text"
              id="name"
              defaultValue={this.props.category.name}
              onChange={this.handleChange}
            />
            <label htmlFor="name">Category name</label>
          </div>
          <div className="input-field">
            <input
              type="text"
              id="urlKey"
              onChange={this.handleChange}
              defaultValue={this.props.category.urlKey}
            />
            <label htmlFor="urlKey">URL Key</label>
          </div>
          <button className="btn">{addingNew ? "Add" : "Save"}</button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    category: state.categoryReducer.category
  };
};

export default connect(
  mapStateToProps,
  { fetchCategory }
)(AddOrEditCategory);

РЕДАКТИРОВАТЬ: включил весь компонент по запросу

1 Ответ

0 голосов
/ 29 января 2019

Вам необходимо заменить атрибут 'defaultValue' на 'value' во входах.

Вы используете контролируемый или неконтролируемый компонент.Вам не нужно использовать defaultValue.

Вы можете установить начальные значения для успеха обещания для fetchCategory 

componentDidMount() {
  this.props.fetchCategory(this.props.match.params.id).then(response => { 
    // Set the initial state here 
  }
}

ИЛИ в 

componentWillReceiveProps(nextProps) {
  // Compare current props with next props to see if there is a change
  // in category data received from action fetchCategory and set the initial state 
}

Отреагировать на документы

    <form onSubmit={this.handleSubmit}>
      <div className="input-field">
        <input
          type="text"
          id="name"
          onChange={this.handleChange}
          value={this.state.name} //<---
        />
        <label htmlFor="name">Category name</label>
      </div>
      <div className="input-field">
        <input
          type="text"
          id="urlKey"
          onChange={this.handleChange}
          value={this.state.urlKey}
        />
        <label htmlFor="urlKey">URL Key</label>
      </div>
      <button className="btn">{addingNew ? "Add" : "Save"}</button>
    </form>
...