React：如何包装输入文本？

Posted 2023-03-05

【中文标题】React：如何包装输入文本？

【英文标题】：React: How to wrap input text?

【发布时间】：2019-08-26 13:52:01

【问题描述】：

我有一个使用 material-ui 编写的 React 表，如下所示：

import React from "react";
import PropTypes from "prop-types";
import  withStyles  from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const styles = theme => (
  root: 
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  ,
  table: 
    minWidth: 700
  
);

let id = 0;
function createData(name, calories, fat, carbs, protein) 
  id += 1;
  return  id, name, calories, fat, carbs, protein ;


const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

function SimpleTable(props) 
  const  classes  = props;

  return (
    <Paper className=classes.root>
      <Table className=classes.table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          rows.map(row => (
            <TableRow key=row.id>
              <TableCell component="th" scope="row">
                row.name
              </TableCell>
              <TableCell align="right">
                <input defaultValue=row.calories/>
              </TableCell>
              <TableCell align="right">row.fat</TableCell>
              <TableCell align="right">row.carbs</TableCell>
              <TableCell align="right">row.protein</TableCell>
            </TableRow>
          ))
        </TableBody>
      </Table>
    </Paper>
  );


SimpleTable.propTypes = 
  classes: PropTypes.object.isRequired
;

export default withStyles(styles)(SimpleTable);

我表格的一些单元格有<input />s（这里只是calories，因为它是一个例子）。如果输入中的文本比输入长，如何让输入中的文本换行？目前，它将其他文本推开并隐藏。

【问题讨论】：

您能修改一下您的问题吗？我不明白这个How can I get the text in the input to wrap if it's to longer than the input?

也许您需要<textarea/> 而不是<input/>

@AlexandrZavalii 我的意思是，如果您开始在输入中写入更多字符，那么在某一时刻，单词序列将比输入框长（类似于打开 cmets 时的情况）堆栈溢出）。

所以尝试为输入设置固定宽度？

【参考方案1】：

您可以使用 css 属性 overflowWrap: "break-word"。阅读更多关于它的信息https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

【讨论】：

谢谢。我试过了，但显然它对'`没有影响。

哎呀，我错过了。我认为你可以使用的最好的是textarea。它会做你想要的。 w3schools.com/tags/tryit.asp?filename=tryhtml_textarea