我有输入字段,我想把它更改为按钮。让它看起来像
相反,
换个标签就行了。我怎么能这么做?
class MyComponent extends React.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker();
}
render(){
return (
<div>
<h3>Choose date!</h3>
<input type='text' ref='datepicker' />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<div id="app"></div>
发布于 2017-07-01 05:58:58
输入的样式为按钮:
Demo:http://jsfiddle.net/GCu2D/1996/
CSS:
.input {
background: #216BA5;
border: 1px solid #216BA5;
cursor: pointer;
color: #FFF;
padding: 5px 10px;
border-radius: 4px;
text-align: center
}
<input readonly type="text" class="input" value="2017-07-1" />
readonly
属性是必需的,以使输入可以单击和不可编辑。
如果您可以将type="text"
更改为type="button"
,那么:
<input type="button" class="input" value="2017-07-1" />
不需要readonly
。
https://stackoverflow.com/questions/44857820
复制相似问题