Question

我这样构建它：

tableValues.map((curRow, row) => {
    tableRows.push(
        <TableRow key={this.state.key + "_row_" + row}> 
        {curRow.map((cellContent, col) => {
        let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}

        return (
            <TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
                {col===0 && this.props.rowHeaders ?
                <div className={classes.header}>{cellContent}</div> :
                <Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
            </TableCell>
        )})}
        </TableRow>
        );
    return null;
});

return (
    <Table key={this.props.key + "_table"} className={classes.table}>
        <TableHead>
            <TableRow>
                {this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
            </TableRow>
        </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>
);

Question实际上是这样创造的光荣的[TextField] 2：

            <div>
                <TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}                      
                />
            </div>

...然后包裹在Paper中。

样式是：

tableCell: {
    padding: 5,
},
textField: {
    padding: 0,
    margin: 0,
    backgroundColor: "#191",
}

此方法有效，我在每个单元格中获得了适当的内容。...但是Question元素的宽度超出了所需的宽度，并且似乎具有最小宽度和一些无法删除的填充。

该表是全角的，直到到达特定点为止，然后在这里注意：

当窗口缩小到特定水平以下时，表不会进一步缩小。就像内部的元素具有最小宽度一样。

作为调查的过程，我将Question元素更改为仅返回“ Hi”。完成后，该表将如下所示：

（也就是说，它凝结得很好……顶部，底部和右侧的填充仍然太多，但是效果更好）

因此，我认为问题出在我的Question组件上。我应该注意，在其他Questions上也会发生这种情况-当未为它们定义宽度时，它们似乎都具有最小宽度...除非它们被放置在具有指定宽度的容器内，例如Material UI Grid。例如，当放置在“网格”中且窗口缩小时，它们会适当缩小：

那么为什么Table / TableCell不能像Grid一样缩小TextField？（或：如何删除textField上明显的“ MinWidth”？）如果未另行指定，则材料UI TextField是否具有最小宽度？

对于它的价值，我尝试指定表的列宽-当表宽时成功，但是它仍然不能解决明显的最小宽度问题。

我也尝试将Question组件更改为<input type="text" name="fname" />，但仍然遇到相同的问题。有趣的是，Question组件只是“嗨”，问题消失了，但是当它是输入时，它就会出现。

Answer 1

我发现本机输入字段的默认宽度为20个字符：https://www.w3schools.com/tags/att_input_size.asp

“大小”属性是关键：

以字符为单位指定元素的宽度。默认值是20

要设置TextField的宽度，必须将属性传递到本机输入字段。

如果您希望更改应用于本机输入的属性，则可以可以这样做，如下：

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

对于我的用例，以下内容将TextField的大小修改为10个字符：

<TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}   
                    inputProps={{
                        size: 10
                    }}                      
                />

不幸的是，这有点糊涂。它既不将输入字段精确地保持在size也不将其视为最小大小。... GridItems，表格列，自由流动的伸缩区域和实际的TextField元素...我不熟悉什么总是“赢”。

在表格中

1 个答案: