Как манипулировать заполнителем Dropdown, onFocus? - PullRequest
Новая
       7

Как манипулировать заполнителем Dropdown, onFocus?

0 голосов
/ 12 февраля 2019

Я новичок в ReactJS.Мне нужно сделать для «заполнителя», который изначально установлен в «State», значение «Empty / Null» при onClicked или onFocus, а затем, когда оно не сфокусировано, снова возвращается в «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"));

1 Ответ

0 голосов
/ 12 февраля 2019

С точки зрения React, placeholder - это state, который необходимо изменить в соответствии с действиями пользователя (onClick, onBlur)

Так что создайте состояние для хранения значения placeholder, котороенеобходимо изменить.

Существует два способа (начиная с версии 16.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 hook

React v16.8.0 вводит Hooks , что позволяет Function Components (не функциональному компоненту, как это относится к функциональному программированию) удерживать состояния.

Для хранения значения placeholder можно использовать React.useState. 

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).

Обратитесь к документации по хукам, Использование State Hook для получения дополнительной информации.

Вы можете поиграться с рабочим кодом на CodeSandbox.

Edit so.answer.54652775

...