如何操作下拉占位符，onFocus？

Question

我是 ReactJS 的新手。我需要在 onClicked 或 onFocus 时将最初设置为 "State" 的 "placeholder" 设置为 Empty/Null，然后当它未被聚焦时，它会再次返回到 "State"。谁能帮我解决这个问题，我是新手，所以我们将不胜感激。

import React from "react";
import { render } from "react-dom";
import { Container, Button, Modal, Dropdown } from "semantic-ui-react";

const stateOptions = [
  { key: "AL", value: "AL", text: "Alabama" },
  { key: "NY", value: "NY", text: "New York" }
];
const App = () => (
  <Dropdown
    placeholder="State"
    fluid
    multiple
    search
    selection
    options={stateOptions}
  />
);

render(<App />, document.getElementById("root"));

Answer 1

从React的角度来看，placeholder是一个state，需要根据用户的操作进行改变(onClick,onBlur)

因此创建一个状态来保存需要更改的 placeholder 值。

有两种方法（从 v16.8.0 开始引入 React Hooks）。

使用 Class 组件

class DropDown extends React.Component {
  defaultPlaceholderState = "State";

  state = { placeholder: this.defaultPlaceholderState };

  clearPlaceholder = () => this.setState({ placeholder: "" });
  resetPlaceholder = () =>
    this.setState({ placeholder: this.defaultPlaceholderState });

  render() {
    return (
      <Dropdown
        onClick={this.clearPlaceholder}
        onFocus={this.clearPlaceholder}
        onBlur={this.resetPlaceholder}
        placeholder={this.state.placeholder}
        fluid
        multiple
        search
        selection
        options={stateOptions}
      />
    );
  }
}

在上面的代码中，placeholder 声明为默认值设置为 this.defaultPlaceholderState 的状态。

当用户单击下拉菜单时，onClick 通过将 placeholder 值设置为空字符串来清除该值。当下拉菜单处于焦点时，onFocus 也是如此。

当用户单击外部 (onBlur) 时，resetPlaceHolder 将占位符值设置为默认值 this.defaultPlaceholderState。

使用带有 useState 钩子的函数组件

React v16.8.0 引入了 Hooks，这使得 Function Components（不是函数式组件，因为它指的是函数式编程）可以保持状态。

您可以使用 React.useState 挂钩来保存 placeholder 值。

const DropDownUsingHook = () => {
  const defaultPlaceholderState = "State";
  const [placeholder, setPlaceholder] = React.useState(defaultPlaceholderState);

  const clearPlaceholder = () => setPlaceholder("");
  const resetPlaceholder = () => setPlaceholder(defaultPlaceholderState);

  return (
    <Dropdown
      onClick={clearPlaceholder}
      onFocus={clearPlaceholder}
      onBlur={resetPlaceholder}
      placeholder={placeholder}
      fluid
      multiple
      search
      selection
      options={stateOptions}
    />
  );
};

⚠ 注意：与Class版本不同，clearPlaceholder、resetPlaceholder方法和placeholder状态不使用this.前缀。

实现方式类似，但您使用 useState 钩子来声明状态和 setter (setPlaceholder)。

请参阅 Hooks 文档，Using State Hook 了解更多信息。

您可以在 CodeSandbox 上试用工作代码。