如何在 react-select 中设置 helperText

Question

我正在使用 react-select and TextField Material-UI。是否可以像 TextField 中那样在 react-select 中设置 helperText（组件下方的小文本）？

提前感谢您的帮助。

P.S。我不认为我的问题是的重复。另一个 post 是关于如何自定义组件的，它是 react-select 的一部分，我想添加一个 react-select 没有的选项。

Answer 1

你是说占位符吗？我想你可以这样设置：

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

但如果您想要相同的外观，为什么要使用来自不同库的控件。我认为您可以将 FormHelperText 与 Select from Material-Ui 一起使用。所以你不妨用这个 select 而不是 react-select.

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

Answer 2

TextField 主要是对包括 FormHelperText.

在内的几个较低级别组件的便利包装

这是 Material-UI 文档中使用 react-select 的自动完成演示：https://material-ui.com/demos/autocomplete/#react-select

这是使用 FormHelperText 的该演示的修改版本：https://codesandbox.io/s/rynvn8po5p

这是该代码的相关片段：

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

Select 的 Material-UI 演示也展示了很多使用 FormHelperText 而不使用 TextField 的例子：https://material-ui.com/demos/selects/#simple-select

这是 FormHelperText 的 API 文档：https://material-ui.com/api/form-helper-text/

如何在 react-select 中设置 helperText

how to set helperText in react-select

reactjs

react-select

material-ui