如何使用 redux 中的数据填充表单字段？

Question

我在尝试使用“客户表”中相应列表中的数据动态填充“客户编辑表单”时遇到问题。 如您所见，我已尝试使用“{this.onChange}”，但无济于事。

import React, { Component } from "react";
import { Table, Container, Button } from "reactstrap";
import {
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input,
  Card,
  CardTitle,
  CardText,
  CardDeck,
  CardSubtitle,
  CardBody,
} from "reactstrap";
import { connect } from "react-redux";
import { getClients, addClient, deleteClient } from "../actions/clientActions";
import PropTypes from "prop-types";

class ClientTable extends Component {
  componentDidMount() {
    this.props.getClients();
  }

  state = {
    detailModal: false,
    editModal: false,
    name: "",
    email: "",
    number: "",
  };

  toggleEdit = () => {
    this.setState({
      editModal: !this.state.editModal,
    });
  };

  toggleDetails = () => {
    this.setState({
      detailModal: !this.state.detailModal,
    });
  };

  onDeleteClick = (id) => {
    this.props.deleteClient(id);
  };

  renderClient = (clients, _id) => {
    return (
      <tr key={_id} timeout={500} classNames="fade">
        <td>
          <Button
            className="remove-btn"
            color="danger"
            size="sm"
            onClick={() => this.onDeleteClick(clients._id)}
          >
            &times;
          </Button>

          <Button
            style={{ marginLeft: ".2rem" }}
            className="add-btn"
            outline
            color="warning"
            size="sm"
            onClick={this.toggleEdit}
          >
            Edit
          </Button>

          <Button
            style={{ marginLeft: ".3rem" }}
            className="detail-btn"
            outline
            color="info"
            size="sm"
            onClick={this.toggleDetails}
          >
            Details
          </Button>
        </td>
        <td>{clients.name}</td>
        <td>{clients.email}</td>
        <td>{clients.number}</td>
      </tr>
    );
  };

  render() {
    const { clients } = this.props.client;
    return (
      <Container id="listContainer">
        <Table
          id="listTable"
          className="table-striped table-bordered table-hover"
          dark
        >
          <tr class="listRow">
            <thead id="tableHeader">
              <tr>
                <th id="listActions">Actions</th>
                <th id="listName">Name</th>
                <th id="listEmail">Email</th>
                <th id="listNumber">Number</th>
              </tr>
            </thead>
            <tbody class="listRow">{clients.map(this.renderClient)}</tbody>
          </tr>
          <Modal isOpen={this.state.editModal} toggle={this.toggleEdit}>
            <ModalHeader toggle={this.toggleEdit}> Edit Client </ModalHeader>
            <ModalBody>
              <Form onSubmit={this.onSubmit}>
                <FormGroup>
                  <Label for="name"> Name </Label>
                  <Input
                    type="text"
                    name="name"
                    id="client"
                    placeholder="Add name"
                    onChange={this.onChange}
                  ></Input>
                  <Label for="email"> Email </Label>
                  <Input
                    type="text"
                    name="email"
                    id="client"
                    placeholder="Add email"
                    onChange={this.onChange}
                  ></Input>
                  <Label for="number"> Number </Label>
                  <Input
                    type="text"
                    name="number"
                    id="number"
                    placeholder="Add number"
                    onChange={this.onChange}
                  ></Input>
                  <Button color="dark" style={{ marginTop: "2rem" }} block>
                    Submit Client Edit
                  </Button>
                </FormGroup>
              </Form>
            </ModalBody>
          </Modal>
          <Modal isOpen={this.state.detailModal} toggle={this.toggleDetails}>
            <ModalHeader toggle={this.toggleDetails}>
              Client Details
            </ModalHeader>
            <CardDeck>
              <Card></Card>
            </CardDeck>
          </Modal>
        </Table>
      </Container>
    );
  }
}

ClientTable.propTypes = {
  getClients: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  client: state.client,
});

export default connect(mapStateToProps, {
  getClients,
  deleteClient,
  addClient,
})(ClientTable);

我 go 如何将 redux 商店的数据放入我的“编辑客户”表单的字段中？ 如果有人有任何想法，我将不胜感激。 这个难倒我了。

Answer 1

通常，通过“控制”元素的“值”属性。 而不是元素本身负责更新其显示的值 - 并且仅偶然触发处理程序到可见的内容 - 它的值作为商店中的值传入。 然后元素通过 reducer 和 store 间接设置它的值。

说明：可以使用 jsx“value”属性控制 html 输入元素的值。 传入一个 onChange function（您已经在做）和一个 value prop 来创建一个典型的受控组件。

<input value={state} onChange={onChange} />

https://reactjs.org/docs/forms.html#controlled-components