如何在react js中为下拉菜单设置占位符? [英] How to set placeholder for dropdown in react js?
问题描述
我添加了一个带有禁用属性的额外选项，但这给了我以下警告:
<块引用>在选择时使用 defaultValue 或 value 道具而不是设置selected 选项.
optionarray 是一个 array，它通过 props 被映射到每个具有 object 的索引上我也通过 props 传递密钥，它在数组中.一切都在这里工作，它只是向我展示了我上面提到的警告.
如何删除它或如何为 react 中的下拉列表设置完美的占位符?
原因是，React 提供了一种更好的方式来使用 states 来控制元素，而不是使用带有选项的 selected 使用 select 的 value 属性并在 state 变量中定义它的值，使用 onChange更新state的方法，这样使用:
class App 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {值:'1'};}使成为(){返回(<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}><option value='1' disabled>选择</option>{[2,3,4].map((i,j)=>{return <option key={i} value={i}>{i}</option>})}</选择>);}}<块引用>
如何为下拉菜单设置占位符?
根据 Mozilla Dev Network，placeholder 不是 上的有效属性.因此，您还可以渲染一个 default 选项:
使用密钥，根据DOC:
<块引用>键帮助 React 识别哪些项目已更改、添加或正在移除.键应该给数组内的元素以给出元素有一个稳定的身份.
建议:
每当我们在循环中创建任何ui 动态时，我们都需要为每个元素分配一个唯一键，让react可以方便的识别元素，主要是用来提升性能.
检查工作示例:
class App extends React.Component {构造函数(道具){超级(道具)；this.state = {值:'1'};}使成为(){返回(<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}><option value='1' disabled>选择</option>{[2,3,4].map((i,j)=>{return <option key={i} value={i}>{i}</option>})}</选择>);}}ReactDOM.render(<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id='container'/>检查小提琴的工作示例:https://jsfiddle.net/29uk8fn0/
<select>
<option selected disabled>Select</option
I added an extra option with a disabled property, but this gives me the following warning:
Use the
defaultValueorvalueprops on select instead of settingselectedon option.
<select>
{this.props.optionarray.map(function(e){
return <option
value={e[self.props.unique]}
key={e[self.props.unique]}
>
{e[self.props.name]}
</option>
})}
</select>
optionarray is an array which is passed through props to be mapped on each index which has an object and I pass the key through props as well which was in the array. Everything is working here, it's just showing me the warning that I mentioned above.
How do I remove that or how do I set a perfect placeholder for a dropdown in react?
Reason is, React provide a better way of controlling the element by using states, so instead of using selected with option use the value property of select and define its value in the state variable, use the onChange method to update the state, Use it in this way:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '1'
};
}
render(){
return(
<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
<option value='1' disabled>Select</option>
{
[2,3,4].map((i,j)=>{
return <option key={i} value={i}>{i}</option>
})
}
</select>
);
}
}
How to set placeholder for dropdown?
According to Mozilla Dev Network, placeholder is not a valid attribute on a <select>. So in place of that you can you this also to render a default option:
<option default>Select</option>
Use of key as per DOC:
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
Suggestion:
Whenever we create any ui dynamically in loop, we need to assign a unique key to each element, so that react can easily identify the element, it basically used to improve the performance.
Check the working example:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '1'
};
}
render(){
return(
<select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
<option value='1' disabled>Select</option>
{
[2,3,4].map((i,j)=>{
return <option key={i} value={i}>{i}</option>
})
}
</select>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='container'/>
Check the fiddle for working example: https://jsfiddle.net/29uk8fn0/
这篇关于如何在react js中为下拉菜单设置占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
