Password 密码输入框
密码输入框表单控件。
何时使用
当用户需要输入密码时。
代码演示
基本使用
基本使用。
import React from 'react';
import ReactDOM from 'react-dom';
import { Password, Row, Col } from 'choerodon-ui/pro';
function log(value) {
console.log(value);
}
ReactDOM.render(
<Row gutter={10}>
<Col span={12}>
<Password placeholder="请输入密码" onChange={log} />
</Col>
<Col span={12}>
<Password placeholder="无揭示按钮" reveal={false} />
</Col>
</Row>,
document.getElementById('container')
);
受控输入框
受控输入框
import React from 'react';
import ReactDOM from 'react-dom';
import { Password } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'default',
};
}
handleChange = (value, oldValue) => {
console.log('[newValue]', value, '[oldValue]', oldValue);
this.setState({
value,
});
};
handleInput = e => {
console.log('[input]', e.target.value);
};
render() {
return (
<Password value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />
);
}
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Password } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
console.log(
'[dataset newValue]',
value,
'[oldValue]',
oldValue,
`[record.get('${name}')]`,
record.get(name),
);
}
class App extends React.Component {
ds = new DataSet({
autoCreate: true,
fields: [
{
name: 'first-name',
type: 'string',
defaultValue: 'choerodon-pro',
required: true,
},
],
events: {
update: handleDataSetChange,
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
reveal | 是否可揭示 | boolean | true |
更多属性请参考 TextField。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .