小编Jos*_*osh的帖子

我正在为一个项目使用 Antd 的 Modal 组件，我正在尝试对其进行自定义。

我需要翻转ok和cancel按钮的位置，使ok按钮在左侧，而cancel在右侧。

我也在尝试将图标颜色更改为红色。

我查看了某人刚刚为 Antd 项目添加的PR以添加此必需的功能，但我无法真正描述我需要使用什么道具来更改定位。

到目前为止，我有一个 CodeSandbox，其中包含我的进度

import React from "react";
import ReactDOM from "react-dom";
import { Modal, Button } from "antd";
import "antd/dist/antd.css";

import "./styles.css";

function showConfirm() {
  Modal.confirm({
    title: "Do you Want to delete these items?",
    content: "Some descriptions",
    iconType: "close-circle",
    okButtonProps: {},
    cancelButtonProps: {},
    onOk() {
      console.log("OK");
    },
    onCancel() {
      console.log("Cancel");
    }
  });
}

function App() {
  return (
    <div className="App">
      <h1>Hello …

我有一个带有复选框和输入的功能组件。我正在尝试为复选框创建一个 onChange 函数，该函数通过实现useStateReact Hook清除输入并在用户单击它时禁用它。有没有人对 Hooks 做过类似的事情有任何经验？我正在尝试查看代码示例以更好地解决这个问题，因为我还是 React Hooks 的新手

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {
  Col, Row, Icon, Input, Tooltip
} from 'antd'
import Checkbox from '../elements/Checkbox'

const CustomerDetails = ({ customer }) => {
  if (customer === null) {
    return (
      <Container>
        <Row>
          <Col span={24}>
            <ErrorContainer>
              <Icon type="exclamation-circle" />
            </ErrorContainer>
          </Col>
        </Row>
      </Container>
    )
  }

  return (
    <Container>
      <h2>{customer.contact.name}</h2>
      <Row>
        <Col span={8}>
          <H3>
            <strong>Primary Contact:</strong>
          </H3>
          <P>{customer.contact.name}</P>
          <P>{customer.contact.phone}</P>
        </Col> …

我有一个带有函数的父组件，该函数在电子邮件输入字段上运行验证，并将该函数作为道具传递给实际包含需要验证的输入字段的子组件。验证正在运行，我现在唯一的问题是验证不会在加载时运行，因此即使输入字段预先填充了用户电子邮件，验证的默认状态也设置为失败，因此用户必须单击进入输入字段并单击退出以触发 onBlur 功能，从而触发验证。我不确定如何使用 react 钩子在加载时运行函数，因为我对使用它们还是很陌生。

Parent Component

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { Row, Col } from 'antd'
import * as actions from '../../actions'
import { tableColumnProps } from '../../propTypes'
import Section from '../../components/layout/Section'
import CustomerDetails from '../../components/orders/CustomerDetails'
import AccountDetails from '../../components/orders/AccountDetails'
import ExistingServices from '../../components/orders/ExistingServices'
import OfferBundlesFilters from '../../components/orders/OfferBundlesFilters'
import OfferBundlesTable from '../../components/orders/OfferBundlesTable'
import OffersHeader from '../../components/orders/OffersHeader'

function validateEmail(value) {
  const …

我有一个 React 类组件，其状态有两个属性。我目前在尝试动态 setState 时遇到 TypeScript 错误，提示Property 'input' does not exist on type 'Readonly<{}>'.

我是 TypeScript 的新手，之前还没有解决向类组件添加类型定义的问题。我主要从事功能组件和挂钩工作，所以这个问题还没有出现在我身上。

我定义了应用程序状态的类型，然后将其传递到组件中，但我仍然收到原始错误以及一个新错误，其中我定义状态说'AppState' only refers to a type, but is being used as a value here.

我一直在寻找解决方案，但未能解决这个问题。

My original component

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppState> {
  constructor(props: any) {
    super(props);
    // Error: 'AppState' only refers to a type, but is being used as a value here.
    this.state: AppState = {
      input: "",
      imageUrl: "", …

我有一个使用 Redux 的 React 应用程序，出于测试目的，我创建了一个本地 JSON 文件，该文件位于data从我的应用程序内调用的文件夹内。

我试图将该 JSON 数据传递给 Redux，以便我可以访问它，然后使用它在单独的组件中映射和显示项目，但我不知道如何执行此操作。任何人都可以提供有关如何实现此目标的示例或资源吗？

我正在使用 Antd 中的 DatePicker 组件，并且正在尝试编辑负责处理月份名称的 Moment 函数。

截至目前，我的组件显示缩写名称，但我正在尝试将其更改为MMMM格式，以便显示月份的全名。

有谁知道如何做到这一点以及这在组件级别是否可能？

My Component

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, Row, Col } from "antd";

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>
        <DatePicker
          open
          className="my-class"
          onChange={onChange}
          onOk={onOk}
          format="MMMM"
        />
      </Col>
      <Col span={2} offset={6}>
        <input value={null} />
      </Col>
    </Row>
  </div>,
  document.getElementById("container")
);