79 lines
2.0 KiB
Markdown
79 lines
2.0 KiB
Markdown
### PasswordRevealer
|
|
|
|
Renders a password input field with a reveal button.
|
|
|
|
#### Class version
|
|
|
|
Initially set `state.shown` to `false` to ensure that the password is not shown by default.
|
|
Create a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.
|
|
In the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field.
|
|
Finally, bind the `<button>`'s `onClick` event to the `toggleShown` method.
|
|
|
|
```jsx
|
|
class PasswordRevealer extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
shown: false
|
|
};
|
|
this.toggleShown = this.toggleShown.bind(this);
|
|
}
|
|
|
|
toggleShown() {
|
|
this.setState(state => ({ shown: !state.shown }));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<input
|
|
type={this.state.shown ? 'text' : 'password'}
|
|
value={this.props.value}
|
|
/>
|
|
<button onClick={this.toggleShown}>Show/Hide</button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
ReactDOM.render(
|
|
<PasswordRevealer />,
|
|
document.getElementById('root')
|
|
);
|
|
```
|
|
|
|
#### Function version
|
|
|
|
Initialize a state variable `shown` to denote whether or not the password is revealed. Set its initial value to `false`.
|
|
In the `render()` method, return a `<div>` element wrapping the `<input>` element which holds the password and the `<button>` element which reveals or hides it. Bind the button's `onClick` event to the `setShown` function that switches the state variable `shown`'s value from `true` to `false` and vice versa.
|
|
|
|
```jsx
|
|
function PasswordRevealer() {
|
|
const [shown, setShown] = useState(false);
|
|
|
|
return (
|
|
<div>
|
|
<input type={shown ? 'text' : 'password'} />
|
|
<button onClick={() => setShown(!shown)}>
|
|
{shown ? 'Hide' : 'Show'}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
ReactDOM.render(
|
|
<PasswordRevealer />,
|
|
document.getElementById('root')
|
|
);
|
|
```
|
|
|
|
|
|
<!--tags: input,state,class -->
|
|
|
|
<!--expertise: 0 -->
|
|
|