formatting input type number in react
import React from "react"; import PropTypes from "prop-types"; class NumberField extends React.Component { constructor(props) { super(props); this.state = { isEditing: false }; } onChange(event) { this.props.onChange(event.target.value); } toCurrency(number) { const formatter = new Intl.NumberFormat("sv-SE", { style: "decimal", currency: "SEK" }); return formatter.format(number); } toggleEditing() { this.setState({ isEditing: !this.state.isEditing }); } render() { return ( <div> <label htmlFor={this.props.name}>Income</label> {this.state.isEditing ? ( <input type="number" name={this.props.name} value={this.props.value} onChange={this.onChange.bind(this)} onBlur={this.toggleEditing.bind(this)} /> ) : ( <input type="text" name={this.props.name} value={this.toCurrency(this.props.value)} onFocus={this.toggleEditing.bind(this)} readOnly /> )} </div> ); } } NumberField.propTypes = { name: PropTypes.string, value: PropTypes.string, onChange: PropTypes.func }; export default NumberField;
