ReactでinputのvalueをonBlurでsetStateすると値が変更できない

Reactでフォーム作っていた時にハマったところの比較

onChangeのみ

value変更可 [state無 value無 setState無]

var Input = React.createClass({
    onChange: function (e) {
        console.log("できらぁ！")
    },
    render: function () {
        return <input type="text" onChange={this.onChange} />
    }
});

value変更不可 [state無 value有 setState無]

var Input = React.createClass({
    onChange: function (e) {
        console.log("できねえ！")
    },
    render: function () {
        return <input type="text" onChange={this.onChange} value="初期値" />
    }
});

value変更不可 [state有 value有 setState無]

var Input = React.createClass({
    getInitialState() {
        return {
            textValue: "initial value"
        };
    },
    onChange: function (e) {
        console.log("できねえ！")
    },
    render: function () {
        return <input type="text" onChange={this.onChange} value={this.state.textValue}/>
    }
});

value変更可 [state有 value有 setState有]

var Input = React.createClass({
    getInitialState() {
        return {
            textValue: "initial value"
        };
    },
    onChange: function (e) {
        console.log("できらぁ！")
        this.setState({textValue: e.target.value});
    },
    render: function () {
        return <input type="text" onChange={this.onChange} value={this.state.textValue}/>
    }
});

onChangeとonBlur

value変更可 [onChangeでsetState]

var Input = React.createClass({
    getInitialState() {
        return {
            textValue: "initial value"
        };
    },
    onChange: function (e) {
        console.log("できらぁ！")
        this.setState({textValue: e.target.value});
    },
    onBlur: function (e) {

    },
    render: function () {
        return <input type="text" onChange={this.onChange} onBlur={this.onBlur} value={this.state.textValue}/>
    }
});

value変更不可 [onBlurでsetState]

var Input = React.createClass({
    getInitialState() {
        return {
            textValue: "initial value"
        };
    },
    onChange: function (e) {

    },
    onBlur: function (e) {
        console.log("できねえ！")
        this.setState({textValue: e.target.value});
    },
    render: function () {
        return <input type="text" onChange={this.onChange} onBlur={this.onBlur} value={this.state.textValue}/>
    }
});

value変更可 [onChangeとonBlurでsetState]

var Input = React.createClass({
    getInitialState() {
        return {
            textValue: "initial value"
        };
    },
    onChange: function (e) {
        console.log("できらぁ！")
        this.setState({textValue: e.target.value});
    },
    onBlur: function (e) {
        console.log("できらぁ！")
        this.setState({textValue: e.target.value});
    },
    render: function () {
        return <input type="text" onChange={this.onChange}  value={this.state.textValue} onBlur={this.onBlur}/>

    }
});

結論

下記の参考記事の通り、inputのvalueはonChangeイベントでしか管理できなかった。
onBlurなどで値の更新を通知したい時は、onChangeで更新されたstateを他のイベントで通知する必要がある。

value値をStateで管理しつつ、onChangeで明示的にsetStateして更新してあげる必要があります。
引用元:React.jsでFormを扱う