React 中，table组件中嵌入的input 在输入改变时，怎么保持焦点

背景描述：
遇到一个需求，要求在一个<table>内部可以添加行，并且行内有<input>组件可以编辑。

我遇到的问题：
当我在行内的input组件中输入东西时，值是改变了，但是却失去了焦点。

可能的问题：
查看DOM，发现在input输入变化时，整个table 的body部分被重绘了。在我的印象中，react的脏值检查是可以找到具体变化的节点，并只对那个节点重绘。但是为什么会整个table都被重绘了。

我的反向传值方式：
每次input在onchange时，我都会把对应数据部分（即整个table的数据）做一个副本。然后在副本中找到整个变化的input的值，修改之为输入框的值。然后setState（数据副本）。

我的问题：什么原因导致焦点丢失，请问怎么避免焦点丢失?

---

我这样写并没有发生失去焦点的事情呀（注：React.js初学）

class MyInput extends React.Component {
    render() {
        return (
            <input type="text" value={this.props.title} onChange={(event) => {
                    this.props.onInputChange(event.target.value);
                }}/>
        );
    };
}

// 两个 input 显示同样的值
class MyTable extends React.Component {
    constructor() {
        super();
        this.state = {
            value: ''
        };
    }

    onInputChange(value) {
        this.setState({value: value});
    }

    render() {
        return (
            <table>
                <tbody>
                    <tr>
                        <td>
                            <MyInput key={1} title={this.state.value} onInputChange={this.onInputChange.bind(this)}/>
                        </td>
                        <td>
                            <MyInput key={2} title={this.state.value} onInputChange={this.onInputChange.bind(this)}/>
                        </td>
                    </tr>
                </tbody>
            </table>
        );
    }
}

const element = document.createElement('div');
document.body.appendChild(element);

ReactDOM.render(
    <MyTable />,
    element
)

---

为啥不用onBlur呢