Password 密码输入框

密码输入框表单控件。

何时使用

当用户需要输入密码时。

代码演示

基本使用

基本使用。

Password密码输入框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Password, Row, Col } from 'choerodon-ui/pro';
  4. function log(value) {
  5. console.log(value);
  6. }
  7. ReactDOM.render(
  8. <Row gutter={10}>
  9. <Col span={12}>
  10. <Password placeholder="请输入密码" onChange={log} />
  11. </Col>
  12. <Col span={12}>
  13. <Password placeholder="无揭示按钮" reveal={false} />
  14. </Col>
  15. </Row>,
  16. document.getElementById('container')
  17. );

受控输入框

受控输入框

Password密码输入框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Password } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: 'default',
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[newValue]', value, '[oldValue]', oldValue);
  13. this.setState({
  14. value,
  15. });
  16. };
  17. handleInput = e => {
  18. console.log('[input]', e.target.value);
  19. };
  20. render() {
  21. return (
  22. <Password value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />
  23. );
  24. }

数据源

绑定数据源。

Password密码输入框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Password } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log(
  6. '[dataset newValue]',
  7. value,
  8. '[oldValue]',
  9. oldValue,
  10. `[record.get('${name}')]`,
  11. record.get(name),
  12. );
  13. }
  14. class App extends React.Component {
  15. ds = new DataSet({
  16. autoCreate: true,
  17. fields: [
  18. {
  19. name: 'first-name',
  20. type: 'string',
  21. defaultValue: 'choerodon-pro',
  22. required: true,
  23. },
  24. ],
  25. events: {
  26. update: handleDataSetChange,

API

参数说明类型默认值
reveal是否可揭示booleantrue

更多属性请参考 TextField