React-Select 如果值存在则显示值如果不显示占位符文本答案

【问题标题】：React-Select if value exists show value if not show placeholder textReact-Select 如果值存在则显示值如果不显示占位符文本
【发布时间】：2021-03-24 07:19:26
【问题描述】：

我在这里使用这个组件：https://react-select.com/home

如果我的数组在我的Assigned 元素中包含一个值，我想要完成的是页面加载，那么我想在我的react-select 框中默认显示它，如果不是，那么我想要我的占位符Assign to显示。

这是我的选择的外观：

<Select
    value={this.state.Product[0].Assigned ? this.state.Product[0].Assigned : selectedAssigned}
    onChange={this.handleChangeAssigned}
    options={this.state.AssignedList}
    placeholder={<div>Assign to:</div>}
/>

在我的Product[0].Assigned 中，当前有一个值，但下拉列表中仍有占位符Assign To。我尝试将值更改为value={this.state.Product[0].Assigned}，但仍然没有运气。

这是我的零钱处理：

handleChangeAssigned = selectedAssigned => {
    this.setState(
      { selectedAssigned },
      () => console.log(`Option selected:`, this.state.selectedAssigned)
    );
  };

【问题讨论】：

你的意思是this.state.Assigned[0]？
@jdaz 不，我有一个名为 Array 的数组，我知道这个名字很烂
这是个坏主意，因为Array 是一个 Javascript 全局对象名，你会遇到奇怪的错误。
@jdaz 感谢您的提醒。我现在会改变它。知道如何解决这个占位符问题吗？
React 不跟踪状态的深度变化。 this.state.Array[0].Assigned你如何改变状态？

标签： javascript reactjs typescript react-select

【解决方案1】：

您似乎将相同的数据存储在多个位置。您正在通过查看this.state.Product[0].Assigned 来检查您是否有作业。但是，当您选择一个分配时，您并没有更新该属性。相反，您正在更新一个完全独立的属性this.state.selectedAssigned。 this.state.Product[0].Assigned 永远不会改变，所以如果你一开始看到一个占位符，那么你总是会看到一个占位符。

您在Select 上设置的value 需要与您更新的值相同。

import React from "react";
import Select from "react-select";

interface Option {
  label: string;
  value: string;
}

interface State {
  Product: any[];
  AssignedList: Option[];
  selectedAssigned: Option | null;
}

export default class MyComponent extends React.Component<{}, State> {
  state: State = {
    Product: [],
    AssignedList: [
      { label: "a", value: "a" },
      { label: "b", value: "b" },
      { label: "c", value: "c" }
    ],
    selectedAssigned: null
  };

  handleChangeAssigned = (selectedAssigned: Option | null) => {
    this.setState({ selectedAssigned }, () =>
      console.log(`Option selected:`, this.state.selectedAssigned)
    );
  };

  render() {
    return (
      <Select
        value={this.state.selectedAssigned}
        onChange={this.handleChangeAssigned}
        options={this.state.AssignedList}
        placeholder={<div>Assign to:</div>}
      />
    );
  }
}

Code Sandbox Link

【讨论】：