как установить helperText в реакции выбора

Question

Я использую Reaction-Select и TextField Material-UI .Есть ли возможность установить helperText (маленький текст под компонентом) в react-select, как это сделано в TextField?

Заранее спасибо за помощь.

PS Я недумаю, мой вопрос - дублирование этого вопроса .Другой пост о том, как пользовательский компонент, который является частью реагировать-выберите, я хочу добавить параметр, который не имеет реагировать-выбора.

Answer 1

TextField - это, в основном, удобная оболочка для нескольких компонентов более низкого уровня, включая FormHelperText.

. Вот демонстрация автозаполнения в документации к Material-UI с использованиемact-select: https://material-ui.com/demos/autocomplete/#react-select

Вот модифицированная версия этой демонстрации с использованием FormHelperText: https://codesandbox.io/s/rynvn8po5p

Вот соответствующий фрагмент этогоcode:

          <Select
            classes={classes}
            styles={selectStyles}
            options={suggestions}
            components={components}
            value={this.state.single}
            onChange={this.handleChange("single")}
            placeholder="Search a country (start with a)"
            isClearable
          />
          <FormHelperText>Here's my helper text</FormHelperText>

Демонстрации Material-UI для Select также показывают много примеров использования FormHelperText без использования TextField: https://material -ui.com / demos / selects / # simple-select

Вот документация API для FormHelperText: https://material -ui.com / api / form-helper-text /

Answer 2

Вы имеете в виду заполнитель?Я думаю, что Вы можете установить это следующим образом:

const MyComponent = () => (
  <Select palceholder="Select..." options={options} />
)

Но если вы хотите, чтобы вы выглядели одинаково, почему вы используете элементы управления из разных библиотек.Я думаю, что вы можете использовать FormHelperText с Выберите из Material-Ui .Таким образом, вы могли бы также этот выбор вместо реакции-выбора.

<FormControl className={classes.formControl}>
  <InputLabel shrink htmlFor="age-native-label-placeholder">
    Age
  </InputLabel>
  <NativeSelect
    value={this.state.age}
    onChange={this.handleChange('age')}
    input={<Input name="age" id="age-native-label-placeholder" />}
  >
    <option value="">None</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
  <FormHelperText>Label + placeholder</FormHelperText>
</FormControl>