Условные реквизиты в действии (ПРИНЯТЬ только 1 из 2 реквизитов) - PullRequest
Новая
       16

Условные реквизиты в действии (ПРИНЯТЬ только 1 из 2 реквизитов)

0 голосов
/ 04 июля 2019

У меня был компонент панели поиска в реакции, и я хотел иметь либо onSubmit проп, либо onChange проп, но не оба из них вместе.Как мне реализовать это наилучшим образом?

Я пытался использовать операторы if-else, но код не выглядит для меня элегантно. 

class QueryBar extends PureComponent {
  render() {
    const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
    return (
      <form
        style={{ width }}
        onSubmit={e => {
          e.preventDefault();
          onSubmit(e.target[0].value);
        }}
      >
        <InputGroup
          placeholder={placeholder}
          width={width}
          leftIcon="search"
          rightElement={
            <Button
              type="submit"
              icon={leftIcon}
              minimal={true}
              intent={Intent.PRIMARY}
            />
          }
        />
      </form>
    );
  }
}

QueryBar.propTypes = {
  width: PropTypes.number,
  placeholder: PropTypes.string,
  leftIcon: PropTypes.oneOfType(['string', 'element']),
  onSubmit: PropTypes.func
};

QueryBar.defaultProps = {
  placeholder: 'Search...',
  leftIcon: 'arrow-right',
  width: 360
};
export default QueryBar;

1 Ответ

0 голосов
/ 04 июля 2019

Вы можете использовать троичный оператор (?) Вместо if-else. 

const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
const handleSubmit = onSubmit ? onSubmit : onChange;

и использовать ту же функцию позже 

<form
    style={{ width }}
    onSubmit={e => {
      e.preventDefault();
      handleSubmit(e.target[0].value);
    }}
>
...