[英]how to set helperText in react-select
I am using react-select and TextField Material-UI .我正在使用react-select和TextField Material-UI 。 Is there possibility to set
helperText
(small text below component) in react-select
like it is made in TextField
?是否有可能像在
TextField
一样在react-select
设置helperText
(组件下方的小文本)?
Thank You for help in advance.提前感谢您的帮助。
PS I do not think my question is duplication of this question . PS 我不认为我的问题是这个问题的重复。 The other post is about how to custom component which is a part of react-select, I want to add an option that react-select doesnt have.
另一篇文章是关于如何自定义作为 react-select 一部分的组件,我想添加一个 react-select 没有的选项。
TextField
is mainly a convenience wrapper around several lower-level components including FormHelperText
. TextField
主要是围绕包括FormHelperText
在内的几个较低级别组件的便利包装器。
Here is the Autocomplete demo in the Material-UI documentation using react-select: https://material-ui.com/demos/autocomplete/#react-select这是 Material-UI 文档中使用 react-select 的自动完成演示: https : //material-ui.com/demos/autocomplete/#react-select
Here is a modified version of that demo using FormHelperText
: https://codesandbox.io/s/rynvn8po5p这是使用
FormHelperText
的该演示的修改版本: https : //codesandbox.io/s/rynvn8po5p
Here's the relevant snippet from that 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>
The Material-UI demos for Select also show many examples of using FormHelperText
without using TextField
: https://material-ui.com/demos/selects/#simple-select Select 的 Material-UI 演示还展示了许多使用
FormHelperText
而不使用TextField
示例: https : //material-ui.com/demos/selects/#simple-select
Here is the API documentation for FormHelperText
: https://material-ui.com/api/form-helper-text/这是
FormHelperText
的 API 文档: https : //material-ui.com/api/form-helper-text/
Do you mean placeholder?你的意思是占位符? I think You can set this way:
我认为你可以这样设置:
const MyComponent = () => (
<Select placeholder="Select..." options={options} />
)
But if you want the same look why do you use controls from different libraries.但是,如果您想要相同的外观,为什么要使用来自不同库的控件。 I think you can use FormHelperText with Select from Material-Ui .
我认为您可以将 FormHelperText 与Select from Material-Ui 一起使用。 So you might as well this select instead of react-select.
所以你不妨用这个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.