Tab键更改表内文本字段的位置

Question

我收到了一个奇怪的行为：当使用Tab键在TextField之间切换第一次时，TextField的位置会改变a小。以下屏幕截图可能更好地解释了这种情况。

如上所示，只有名为＆{39; treatmentType＆＃39;的TextField的位置。没有更改，因为它是通过点击事件而非Tab键集中的。

这是我的代码：

class TreatmentContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            treatmentType: '',
            notes: '',
            status: '',
            location: '',
            crop: '',
            firstName: '',
            lastName: '',
            email: '',
            treatmentDay: ''
        };
        this.notesToAdd = {
            treatmentType: 'text',
            notes: 'text',
            status: 'text',
            location: 'text',
            crop: 'text',
            firstName: 'text',
            lastName: 'text',
            email: 'text',
            treatmentDay: 'number',
        };
        this.reorgTableRow = this.reorgTableRow.bind(this);
    }

    reorgTableRow() {
        const notesKeys = _.keys(this.notesToAdd);
        const chunkedKeys = _.chunk(notesKeys, 3);
        return _.map(chunkedKeys, (keyChunk, i) => (
            <TableRow selectable={false} key={i} style={{border: 'None'}}>
                {_.map(keyChunk, (keyName, j) => (
                    <TableRowColumn key={j}>
                        <TextField
                            hintText={keyName}
                            floatingLabelText={keyName}
                            type={this.notesToAdd[keyName]}
                            value={this.state[keyName]}
                            onChange={(e, val) => this.handleInpChange(keyName, val)}
                        />
                    </TableRowColumn>
                ))}
            </TableRow>
        ));
    }

    render() {
        return (
            <div>
                <Table>
                    <TableBody displayRowCheckbox={false}>
                        {this.reorgTableRow()}
                    </TableBody>
                </Table>
            </div>
        );
    }
}

如果有人能给我一个导致这种行为的线索，我将非常感激。非常感谢！