如何操作Dropdown占位符，onFocus？

Question

我是ReactJS的新手。我需要在onClicked或onFocus时将设置为“State”的“占位符”初始化为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值。

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

使用类组件

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值。当Dropdown处于焦点时，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 hook来声明状态和setter（setPlaceholder）。

有关详细信息，请参阅Hooks文档Using State Hook。

您可以使用CodeSandbox上的工作代码。