代码之家 › 专栏 › 技术社区 › Suhail Gupta

无法从输入字段的“选择框/写入”中选择项目。我是不是处理“钥匙”不正确?

antd typescript reactjs javascript

0

Suhail Gupta · 技术社区 · 6 年前

我已经使用antd组件来渲染字段。我面临的问题是,我既不能从选择框中进行选择,也不能在如下所示的输入字段中进行写入。我觉得我在用React key 不适当的 mocFields 在从 getMOCField

import React, { Component } from "react";
import { Button, Icon, Select, Form, Input } from "antd";
const FormItem = Form.Item;
const Option = Select.Option;
import { FormComponentProps } from "antd/lib/form/Form";

type state = {
  mocFields: JSX.Element[]
};

export class MOC extends Component<FormComponentProps, state> {
  constructor(props) {
    super(props);
    this.state = {
      mocFields: []
    };
    this.addMOCField = this.addMOCField.bind(this);
    this.removeMOCField = this.removeMOCField.bind(this);
  }

  componentDidMount() {}

  componentWillReceiveProps(nextProps) {}

  removeMOCField(key, event: React.MouseEvent<HTMLElement>) {
    event.preventDefault();
    const { mocFields } = this.state;

    mocFields.splice(key, 1);

    this.setState({
      mocFields
    });
  }

  getMOCFieldFooter() {
    return (
      <div className="d-flex justify-content-between small">
        <div className="inline-block">
          <Button
            type="primary"
            shape="circle"
            icon="plus"
            ghost
            size="small"
            className="d-font mr-1"
            onClick={this.addMOCField}
          />
          <div
            className="text-primary pointer d-font inline-block letter-spacing-1"
            onClick={this.addMOCField}
          >
            Add another&nbsp;
          </div>
          <div className="d-font inline-block letter-spacing-1">or&nbsp;</div>
          <div className="text-primary pointer d-font inline-block letter-spacing-1">
            Create a new MOC
          </div>
        </div>
      </div>
    );
  }

  getMOCField(key) {
    const { getFieldDecorator } = this.props.form;

    return (
      <div className="d-flex justify-content-between">
        <div className="inline-block">
          <FormItem label="Select MOC">
            {getFieldDecorator(`selected_moc[${key}]`, {
              rules: [
                {
                  required: true,
                  message: "Please select moc"
                }
              ]
            })(
              <Select>
                <Option value={"A"}>A</Option>
                <Option value={"B"}>B</Option>
              </Select>
            )}
          </FormItem>
        </div>

        <div className="inline-block">
          <FormItem label="Recovery (%)">
            {getFieldDecorator(`recovery_percentage[${key}]`, {
              rules: [
                {
                  required: true,
                  message: "Please input the recovery percentage"
                }
              ]
            })(<Input type="number" step="0.000001" />)}
          </FormItem>
        </div>
        <div className="inline-block pointer">
          <span>
            <Icon type="close" onClick={this.removeMOCField.bind(this, key)} />
          </span>
        </div>
      </div>
    );
  }

  addMOCField(event: React.MouseEvent<HTMLElement>) {
    event.preventDefault();
    const { mocFields } = this.state;
    const MOCField = this.getMOCField(mocFields.length);
    mocFields.push(MOCField);

    this.setState({
      mocFields
    });
  }

  getAddMOCButton() {
    return (
      <div className="d-flex w-100 mt-3">
        <Button
          type="primary"
          ghost
          className="w-100"
          onClick={this.addMOCField}
        >
          <Icon type="plus-circle" />
          Add MOC
        </Button>
      </div>
    );
  }

  render() {
    const { mocFields } = this.state;
    const mocButton = this.getAddMOCButton();
    const toRender =
      mocFields.length > 0 ? (
        <div className="w-100 p-2 gray-background br-25">
          {mocFields.map((f, index) => (
            <div key={index}>{f}</div>
          ))}
          {this.getMOCFieldFooter()}
        </div>
      ) : (
        mocButton
      );

    return toRender;
  }
}

这可能是什么原因?我做错什么了?当前,上述组件呈现如下:

如果 莫克菲尔德 为零,则会呈现一个用于添加新字段的按钮。
按钮按下后, mocField 使用选择框和输入字段填充,如上图所示。钥匙 div

0 回复 | 直到 6 年前

1

Samuel Vaillant 6 年前

似乎侦听器一旦存储在数组中就不能工作了。我试着把调用内联到 getMOCField 在 render

class MOC extends Component {
  // ...

  addMOCField(event) {
    event.preventDefault();

    const { mocFields } = this.state;

    // We only keep inside the state an array of number
    // each one of them represent a section of fields.
    const lastFieldId = mocFields[mocFields.length - 1] || 0;
    const nextFieldId = lastFieldId + 1;

    this.setState({
      mocFields: mocFields.concat(nextFieldId),
    });
  }

  removeMOCField(key, event) {
    event.preventDefault();

    this.setState(prevState => ({
      mocFields: prevState.mocFields.filter(field => field !== key)
    }));
  }

  render() {
    const { mocFields } = this.state;
    const mocButton = this.getAddMOCButton();
    const toRender =
      mocFields.length > 0 ? (
        <div className="w-100 p-2 gray-background br-25">
          {/* {mocFields.map((f, index) => (
                <div key={index}>{f}</div>
              ))} */}
          {mocFields.map(fieldIndex => (
            <div key={fieldIndex}>{this.getMOCField(fieldIndex)}</div>
          ))}
          {this.getMOCFieldFooter()}
        </div>
      ) : (
        mocButton
      );

    return toRender;
  }
}