かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

React + TypeScriptで入力値チェック

入力値チェックしたかったら、こんな感じのを用意するのかなというのを作ってみました。 業務で使うなら、もうちょっと汎用性減らして数字用とか○○コード用とかっていう風に作ってもいいのかもね。

interface InputTextBoxProps extends React.Props<{}> {
    label: string;
    required?: boolean;
    regex?: RegExp;
    validationMessage?: string,
    initialValue?: string;
    onChange?: (value: string, valid: boolean) => void;
    errorStyle?: React.CSSProperties;
}

interface InputTextBoxState {
    value: string;
    valid: boolean;
}

class InputTextBox extends React.Component<InputTextBoxProps, InputTextBoxState> {
    static defaultProps = {
        required: false,
        initialValue: '',
        validationMessage: ''
    };

    constructor(props: InputTextBoxProps) {
        super(props);

        this.state = {
            value: this.props.initialValue,
            valid: this.validate(this.props.initialValue)
        } as InputTextBoxState;
    }

    private handleChange(e: React.FormEvent) {
        var value = (e.target as HTMLInputElement).value;
        var validate = this.validate(value);
        this.setState({ 
            value: value,
            valid: validate
        });
        if (this.props.onChange) {
            this.props.onChange(value, validate);
        }
    }

    private validate(value: string) {
        if (this.props.required && !value) {
            return false;
        }

        if (this.props.regex) {
            return this.props.regex.test(value);
        }

        return true;
    }

    render() {
        var validationMessage = this.state.valid ? null : <span>{this.props.validationMessage}</span>;
        return (
            <div>
                <label>{this.props.label}</label>
                <input type='text' value={this.state.value} onChange={this.handleChange.bind(this) } style={this.state.valid ? null : this.props.errorStyle} />
                {validationMessage}
            </div>
        );
    }
}

単純に変更通知のonChangeで値のチェックしてるだけです。必須入力と正規表現での入力チェックに対応しています。 因みに実行してみるとこんな雰囲気になります。

class App extends React.Component<{}, {}> {
    render() {
        return (
            <InputTextBox label='test' required={true} errorStyle={{ border: '1px solid red' }} regex={/^[0-9]+$/} validationMessage='Error!'/>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('content'));

f:id:okazuki:20160103213856p:plain

f:id:okazuki:20160103213903p:plain