Как передать реквизиты пользовательским компонентам вact-select - PullRequest
Новая
       10

Как передать реквизиты пользовательским компонентам вact-select

0 голосов
/ 28 сентября 2018

Я пытаюсь использовать пользовательский компонент в качестве поля ввода вact-select.Так как мне нужна проверка, я пытаюсь использовать HTML5 oninvalid (onInvalid в JSX) для моего входного тега и установить пользовательское сообщение для oninvalid.Однако я не могу передать сообщение в качестве опоры компоненту, который я устанавливаю в select.Ниже приведен мой код.

Input.js 

import React from "react";
import { components } from "react-select";

export default class Input extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("component mounted");
  }
  setInvalidMessage = event => {
    event.target.setCustomValidity("Custom Message");
  };

  render() {
    if (this.props.isHidden) {
      return <components.Input {...this.props} />;
    }
    return (
      <components.Input
        {...this.props}
        required
        onInvalid={this.setInvalidMessage}
      />
    );
  }
}

example.js 

import React from "react";
import Input from "./Input";
import Select from "react-select";
import { colourOptions } from "./docs/data";

const InputBoxWithText = props => {
  return <Input {...props} />;
};

export default () => (
  <form>
    <Select
      closeMenuOnSelect={true}
      components={{ InputBoxWithText }}
      options={colourOptions}
    />
    <input type="submit" />
  </form>
);

Если я передам атрибут Input в компонентах, я получу жестко закодированное сообщение в Input.js.Если я передаю InputBoxWithText, я вообще не вижу монтирования ввода.

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './example';

ReactDOM.render(
<Example />,
document.getElementById('root')
);

Вот CodeSandBox.io URL .

Кто-нибудь может дать мне знать, если я что-то не так делаю.

1 Ответ

0 голосов
/ 28 сентября 2018

У меня нет решения (я тоже ищу то же самое), но в вашем примере есть несколько ошибок.

Чтобы загрузить ввод, вы должны написать components={{ Input: InputBoxWithText }}, так какимя компонента для Input не равно InputBoxWithText.

Кроме того, onInvalid, похоже, не является частью Input API, поэтому он никогда не сработает.Вы пытаетесь использовать <input oninvalid="" /> ..?

...