Question

我的React应用程序中有一个“编辑类别”组件。该ID通过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);

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

Answer 1

您需要在输入中将“ 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 
}

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”事件

1 个答案: