ReactJS项目中，根据state动态渲染TextField，如何做到输入框持续获取焦点？

初学者。

应用场景：在某个表单中，需要让用户手动增加文本域的数量，同时保留文本框中已输入的值。

逻辑实现：
1，state中预置一个列表数组feeItems。
2，render中遍历feeItems，返回对应数量的文本域，文本域绑定onChange事件，值变化时更新state，保存最新的值。
3，设定一个按钮，绑定onTouchTap事件，点击时向feeItems数组中追加值，更新state，此时会重新渲染，返回对应数量的文本域。

遇到问题：在第2步中，文本域中输入单个字符，即触发onChange事件，此时state更新，接着重新渲染，最终导致该文本域失去焦点，无法连续输入，这样不合理。

请问大家有没有解决方案或者能实现类似应用场景的方案，谢谢。

附代码，不完整，仅提供逻辑实现：

import React, {Component, PropTypes} from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import {grey400, blue500, red500, cyan500} from 'material-ui/styles/colors';    

import ContentAddCricle from 'material-ui/svg-icons/content/add-circle';
import ContentRemoveCricle from 'material-ui/svg-icons/content/remove-circle';

import TextField from 'material-ui/TextField';


class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {            
        feeItems: [
          {
            name: '',
            cost: ''
          }
        ]
      }   
    }
  }

  componentWillMount() {
    
  }

  componentDidMount() {
        
  }  
    
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div style={styles.root}>
              
          <div className="form-wrap" style={styles.form}>
            <div className="fee-wrap">
              <List className="fee-groups">
                {
                  this.state.formData.feeItems.map((fee, key) => {
                    return <ListItem key={guid() } className="fee-item"
                      primaryText={
                        <div>
                          <TextField
                            name="name[]"
                            value={fee.name}
                            hintText="费用名称"
                            ref="fee_name"
                            fullWidth={true}
                            style={styles.textField}
                            onChange={this.handleFeeItemTextField.bind(this, key, 'name') }
                            />
                          <TextField
                            name="cost[]"
                            value={fee.cost}
                            hintText="金额"
                            style={styles.feeInlineTextField}
                            onChange={this.handleFeeItemTextField.bind(this, key, 'cost') }
                            />                              
                        </div>
                      }
                      rightIcon={
                        key == 0 ?
                          <ContentAddCricle
                            className="fee-btn"
                            style={styles.feeButton}
                            color={cyan500}
                            onTouchTap={this.handleAddFeeFitem.bind(this) }/>
                          :
                          <ContentRemoveCricle
                            className="fee-btn"
                            style={styles.feeButton}
                            color={red500}
                            onTouchTap={this.handleRemoveFeeFitem.bind(this, key) }/>
                      }
                      style={{ border: '1px dashed #ddd', borderRadius: 3, marginBottom: 10 }}
                      innerDivStyle={{ background: '#fff' }}
                      disableKeyboardFocus={true}/>
                  })
                }

              </List>
            </div>
            
          </div>    
        </div>
      </MuiThemeProvider>
    );
  }

  handleFeeItemTextField(key, field, event, value) {
    this.state.formData.feeItems[key][field] = value;
    this.setState(this.state);
  }
  handleFeeItemSelectField(key, field, event, index, value) {
    this.state.formData.feeItems[key][field] = value;
    this.setState(this.state);
  }
  handleAddFeeFitem(event) {
    event && event.preventDefault();
    let item = {
      name: '',
      cost: '',
      type: 1,
      isall: 1
    };

    this.state.formData.feeItems.push(item);
    this.setState(this.state);
  }
  handleRemoveFeeFitem(key, event) {
    event && event.preventDefault();
    delete this.state.formData.feeItems[key];
    this.setState(this.state);
  }      
}    

Demo.contextTypes = {
  router: React.PropTypes.object.isRequired,
};    
export default Demo;

---

问题解决了吧？不应该用value属性吧？试试defaultValue属性？