设置输入的默认值答案

【问题标题】：Set default value for input设置输入的默认值
【发布时间】：2020-03-26 11:57:19
【问题描述】：

我想为 ant design 组件设置一个默认值，但我不能。我不出现。为什么？以及如何设置默认值？

应用链接：https://codesandbox.io/s/hide-already-selected-ant-design-demo-ezmrw

【问题讨论】：

标签： reactjs

【解决方案1】：

对于一个完全受控的组件（值，onChange bound）

你不需要设置defaultValue

直接用默认值初始化状态即可。

state = {selectedItems: [OPTIONS[0]]};
...
// defaultValue={"test"}

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];

class SelectWithHiddenSelectedOptions extends React.Component {
  state = {
    selectedItems: [OPTIONS[0]]
  };

  handleChange = selectedItems => {
    this.setState({ selectedItems });
  };

  render() {
    const { selectedItems } = this.state;
    const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
    return (
      <Select
        placeholder="Inserted are removed"
        value={selectedItems}
        onChange={this.handleChange}
        style={{ width: "100%" }}
      >
        {filteredOptions.map(item => (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        ))}
      </Select>
    );
  }
}

ReactDOM.render(
  <SelectWithHiddenSelectedOptions />,
  document.getElementById("container")
);

【讨论】：

【解决方案2】：

从 prop in 中删除 value，一切都会开始正常工作

【讨论】：