如何在React-Select中设置帮助文本（helperText）

Question

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

提前感谢您的帮助。

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

- user0810

---

嗨，Laura，我认为这不是重复。另一篇帖子是关于如何自定义组件，它是react-select的一部分，而我想添加一个react-select没有的选项。 - user0810

发现 InputLabel 和 NativeSelect 的效果不太好。对于 NativeSelect，在 InputLabel 上使用 shrink={true} 对我有所帮助，最终代码如下：<InputLabel shrink={true}>选择角色</InputLabel>。 - Manohar Reddy Poreddy

Answer 1

TextField主要是对一些低级组件（包括FormHelperText）的方便封装。

以下是使用react-select的Material-UI文档中Autocomplete演示：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>

Material-UI的选择器示例中展示了许多使用FormHelperText但不使用TextField的示例：https://material-ui.com/demos/selects/#simple-select

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

- Ryan Cogswell

Answer 2

您是指占位符吗？ 我认为您可以这样设置：

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

但是如果你想要相同的外观，为什么要使用来自不同库的控件。我认为你可以使用Material-Ui中的Select与FormHelperText一起使用。所以你可以使用这个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>

- Peter Ambruzs

---

很遗憾，占位符在字段内部，在TextField中被称为标签。HelperText是TextField下方的小文本。 - user0810

谢谢您的回答，但它仍然不是我想要的。MUI 中的选择器没有像 react-select 那样提供许多功能，例如自动完成。简而言之，MUI 中的选择器不是我想要使用的。 - user0810

你的代码片段显示了一个错误 { "message": "未捕获的语法错误：意外的令牌<", "filename": "https://stacksnippets.net/js", "lineno": 13, "colno": 9 } - user0810

我不打算从这里运行这个代码片段。我已经移除了运行按钮。我确定react-select没有帮助文本。但是这个文本在你的控制之下。所以你可以在react-select后面渲染一个div来呈现文本，并使用css设置样式。或者你可以尝试使用material-ui中的FormHelperText组件与react-select一起使用。 - Peter Ambruzs

啊，我现在明白了！我会尝试使用FormHelperText选项，谢谢 ;) - user0810

拼写 placeholder - user3711421