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

Question

是ReactJS的新手。我需要将onClicked或onFocus上最初设置为“状态”的“占位符”设置为“空/空”，然后当它不关注时，再次回到“状态”。有人可以帮助我吗？我是一个非常新的响应者，因此我们将不胜感激。

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 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}
    />
  );
};

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

实现方式相似，但是您使用useState钩子声明状态和设置器（setPlaceholder）。

有关更多信息，请参阅Hooks文档Using State Hook。

您可以在CodeSandbox上使用有效的代码。