javascript - ReactJS：试图在状态内部的数组中获取值

问题描述

因此，我正在使用 antd 来处理具有如下初始状态的 Form 组件：

...constructor
...super
state = { 
  tags: ["tag"]
}

handleSubmit = e => {
  e.preventDefault();
  console.log(this.state);
  // gives me Object { tags: [] }
}

render() {
  return <Form onSubmit={this.handleSubmit} />
}

这就是字面意思......但我不知道为什么我总是在控制台中得到一个空数组。也许用这么多的信息是不可能弄清楚的，但这就是为什么它让我发疯。我注意到，如果我在这个类中注释掉一些代码，它会突然开始显示数组值......不知道。

任何帮助，将不胜感激。

当我进入 React Devtools 时，它会在我的标签数组中显示“标签”。但是，当我点击提交时，它会清除数组。我猜这与某种方式有关，但我不确定为什么状态只清除标签数组而不是其他状态值。与深层克隆有关...？

标签： javascriptreactjsantd

要在 ant design 表单中设置默认值并在验证后，您需要按照所需的步骤操作：

包装形式：


class YouComponent extends Component { //..... }

const WrappedComponent = Form.create({ name: 'you_form' })(YouComponent);

export default WrappedComponent;

要设置默认值：

在您的情况下，我认为您可以将该Select组件用于tags

 <Form layout="inline" onSubmit={this.handleSubmit}>
    <Form.Item>
      {getFieldDecorator("tags", {
        rules: [{ required: true, message: "Pleases select tag!" }]
      })(
        <Select
          mode="multiple"
          style={{ width: "100%" }}
          placeholder="Please select"
          // here setup default selected of tags
          defaultValue={this.state.tags}
        >
          {// map here tags <Select.Option>}
        </Select>
      )}
    </Form.Item>
  </Form>

选择文档

要验证并从表单中获取价值：

handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

javascript - ReactJS：试图在状态内部的数组中获取值

问题描述

解决方案

推荐阅读