在检索数据后设置输入字段的默认值会导致内容重叠并且不会触发 "onChange" 事件

Question

我的 React 应用程序中有一个 "edit category" 组件。 ID 通过 URL 传递。当组件被安装时，动作 "fetchCategory" 被调用，它用当前类别更新组件上的道具。

我有一个要预先填充的表单，我目前正在使用输入中的默认值来完成此操作。

但是，这并未反映在状态中，文本字段的标签与输入字段重叠。

如有任何帮助，我们将不胜感激。我将在下面留下我的代码片段，这有助于理解我正在尝试做的事情。

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);

编辑：按要求包含整个组件

Answer 1

您需要将输入中的 'defaultValue' 属性替换为 'value'。

您使用的是受控组件与非受控组件。您不需要使用默认值。

您可以为 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 
}

React docs

    <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>

在检索数据后设置输入字段的默认值会导致内容重叠并且不会触发 "onChange" 事件

Setting the default value of an input field after data is retrieved causes the content to overlap and the "onChange" event not to be triggered

materialize

reactjs

redux-thunk

react-redux