在反应中重复使用

Question

我需要重用一些基本组件来避免代码重复，但是某些示例对我没有帮助

问题出在这里const [cpf，setCpf] = useState（data.cpf）;

此data.cpf正在从api获取信息，但未将const填充为初始值

HOC

const onHandleChange = onChange => event => {
  const { value } = event.target;

  onChange(value);
};

字段：

export const Field = ({ component: Component, onChange, ...props }) => (
  <div>
    <Component onChange={onHandleChange(onChange)} {...props} />
  </div>
);

InputField：

import React, { useState } from "react";

//Componentes
import { InputGroup, Button, FormControl } from "react-bootstrap";
import EditIcon from "@material-ui/icons/Edit";
import CheckIcon from "@material-ui/icons/Check";

export function InputField({ value, name, type, onChange }) {
  const [teste, setTeste] = useState(true);
  function click(e) {
    setTeste(!teste);
  }
  return (
    <div>
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text
            style={{
              backgroundColor: "white",
              borderStyle: "hidden"
            }}
          >
            {name}
          </InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl
          style={{ borderStyle: "hidden" }}
          disabled={teste}
          value={value}
          type={type}
          onChange={onChange}
        />
        <InputGroup.Append>
          {teste === true ? (
            <Button variant="white" onClick={click}>
              <EditIcon />
            </Button>
          ) : (
            <Button variant="white" onClick={click}>
              <CheckIcon />
            </Button>
          )}
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

ViewClient：

import React, { useState } from "react";

//UI-Components
import { Modal, Card, ListGroup, Button } from "react-bootstrap";
import Account from "@material-ui/icons/AccountCircle";

//Reecriação de componentes
import { Field } from "./Components/Input";
import { InputField } from "./Components/InputFieldComponent";

//Redux
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

//Creators
import { Creators as ClientActions } from "../../../redux/store/ducks/cliente";
import { Creators as MapActions } from "../../../redux/store/ducks/map";
import { Creators as CaboActions } from "../../../redux/store/ducks/cabo";

function ViewClient(props) {
  const { viewClient } = props.redux.client;

  const { data } = viewClient; //Informações do usuario.

  const [cpf, setCpf] = useState(data.cpf);
  const [name, setName] = useState(data.name);

  function handleHideModal() {
    const { hideClientViewModal } = props;
    hideClientViewModal();
  }

  function changeActive() {
    console.log(cpf);
  }

  return (
    <>
      <Modal size="lg" show={viewClient.visible} onHide={handleHideModal}>
        <Modal.Header
          style={{
            justifyContent: "center",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            backgroundColor: "#F7D358"
          }}
        >
          <h6 style={{ fontSize: "10px" }}>{data.created_at}</h6>
          <Account
            style={{
              display: "block",
              fontSize: "50px",
              marginTop: "10px",
              marginBottom: "10px"
            }}
          />
          <Modal.Title style={{ color: "#585858" }}>{data.name}</Modal.Title>
        </Modal.Header>

        <Modal.Body style={{ backgroundColor: "#FFFFFF" }}>
          <Card style={{ width: "100%" }}>
            <Card.Header
              style={{ backgroundColor: "#D8D8D8", textAlign: "center" }}
            >
              Informações do cliente
            </Card.Header>
            <ListGroup variant="flush">
              <ListGroup.Item>
                <Field
                  component={InputField}
                  name={cpf}
                  type={"text"}
                  value={cpf}
                  onChange={setCpf}
                />
              </ListGroup.Item>
              <ListGroup.Item>
                <Field
                  component={InputField}
                  name={"Nome"}
                  type={"text"}
                  value={name}
                  onChange={setName}
                />
              </ListGroup.Item>
            </ListGroup>
          </Card>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="info">Salvar Alterações</Button>
          {data.status === null ? (
            <Button variant="primary" onClick={changeActive}>
              Ativar cliente
            </Button>
          ) : (
            <Button variant="danger" onClick={changeActive}>
              Desativar
            </Button>
          )}
          <Button variant="danger">Excluir</Button>
          <Button variant="secondary">Adicionar Cabo</Button>
          <Button variant="secondary">Fechar</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

const mapStateToProps = state => ({
  redux: state
});

//Ações
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    { ...ClientActions, ...MapActions, ...CaboActions },
    dispatch
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ViewClient);