如何在react-select中設置helperText

Question

我正在使用react-select和TextField Material-UI 。 是否有可能像在TextField一樣在react-select設置helperText （組件下方的小文本）？

提前感謝您的幫助。

PS 我不認為我的問題是這個問題的重復。 另一篇文章是關於如何自定義作為 react-select 一部分的組件，我想添加一個 react-select 沒有的選項。

Answer 1

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/

Answer 2

你的意思是占位符？ 我認為你可以這樣設置：

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>