Reactjs 如何在react select中设置helperText

我正在使用和。 是否可以像在

TextField

中一样在

react select

中设置

helperText

（组件下方的小文本）

提前谢谢你的帮助

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

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

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

constmycomponent=（）=>(
)

但是如果您想要相同的外观，为什么要使用来自不同库的控件呢。我想你可以用FormHelperText和。因此，您最好选择此选项，而不是反应选择

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

年龄
没有一个
十
二十
三十
标签+占位符

TextField

主要是围绕几个较低级别组件的方便包装，包括

FormHelperText

以下是使用react select在Material UI文档中的自动完成演示：

下面是使用

FormHelperText

修改的演示版本：

下面是该代码的相关片段：

          <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的材料UI演示还显示了许多使用

FormHelperText

而不使用

TextField

的示例：

---

这是

FormHelperText

的API文档：

不幸的是，占位符在字段内，在TextField中称为标签。HelperText是TextField下面的一个小文本谢谢你的回答，但它仍然不是我想要的。Select from MUI没有太多的东西会对Select产生反应，例如自动完成，简而言之，Select from MUI不是我想要使用的。并且您的剪断显示错误{“消息”："未捕获语法错误：意外标记我不打算从此处运行此代码段。我删除了“运行”按钮。我确信react select没有帮助文本。但此文本由您控制。因此，您可以在react select之后在div中呈现文本，并使用css设置样式。或者，您可以尝试使用mat中的FormHelperText组件带有react-select的串行ui。啊，我现在明白了！我将尝试FormHelperText选项，谢谢；）嗨，劳拉，我不认为这是重复。另一篇文章是关于如何自定义组件，它是react-select的一部分，我想添加react-select没有的选项。发现

InputLabel

和

NativeSelect

没有工作正常。

InputLabel

上的

shrink={true}

帮助我进行了

NativeSelect

，最后一个是

选择角色