React输入字段在键入一个数字后失去焦点

Question

目前，只要我输入一个数字，输入字段就会失去焦点。所以我把sharesToBuy.map部分赋值给variable，然后把它移到StockQuotes组件之外。然后我得到错误消息，说StyleTabledCell和StyleTable行没有从material ui识别。如何重新排列我的组件，使输入字段不会失去焦点？或者有没有什么钩子可以用来解决这个问题？我尝试了autofocus()，useRef和向外移动组件，但似乎都不起作用。

import React, { useState, useEffect } from 'react';
import './StockQuotes.css'; 
import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import stockData from '../util/stockData';
import { useDispatch } from 'react-redux';
import { getStocksOwned } from '../slices/stocksOwnedSlice';

const StockQuotes = ({ availableFunds, setAvailableFunds }) => {

    const [sharesToBuy, setSharesToBuy] = useState(stockData);

    return( 
        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="customized table">
                <TableHead>
                    <TableRow>
                        <StyledTableCell>Stock Name</StyledTableCell>
                        <StyledTableCell align="right">Current Price</StyledTableCell>
                        <StyledTableCell align="right">Shares</StyledTableCell>
                        <StyledTableCell align="right">Order</StyledTableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                {sharesToBuy.map((stock, index) => (
                    <StyledTableRow key = {index} >
                        <StyledTableCell component="th" scope="row">
                            {stock.name}
                        </StyledTableCell>
                        <StyledTableCell align="right">${stock.price}</StyledTableCell>
                        <StyledTableCell align="right"><input type="number" value ={stock.owned} onChange={event => handleChange(event, index)}></input></StyledTableCell>
                        <StyledTableCell align="right">
                            <ThemeProvider theme={theme}>
                                <Button variant="contained" color="primary" className={classes.margin} 
                                disabled={stock.owned === 0 || !stock.owned}
                                onClick={event => handleClick(event, index)}>
                                    BUY
                                </Button>
                            </ThemeProvider>
                        </StyledTableCell>
                    </StyledTableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

Answer 1

问题

您是在StockQuotes组件的render函数中定义样式组件的。

函数组件的整个函数体都是！如果在渲染中，withStyles HOC每次都会创建一个新组件。

解决方案

只需将StyledTableCell和StyledTableRow移出StockQuotes组件即可。

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const StockQuotes = ({ availableFunds, setAvailableFunds }) => {
  ...

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Stock Name</StyledTableCell>
            <StyledTableCell align="right">Current Price</StyledTableCell>
            <StyledTableCell align="right">Shares</StyledTableCell>
            <StyledTableCell align="right">Order</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sharesToBuy.map((stock, index) => (
            <StyledTableRow key={stock.name}>
              <StyledTableCell component="th" scope="row">
                {stock.name}
              </StyledTableCell>
              <StyledTableCell align="right">${stock.price}</StyledTableCell>
              <StyledTableCell align="right">
                <input
                  type="number"
                  value={stock.owned}
                  onChange={(event) => handleChange(event, index)}
                ></input>
              </StyledTableCell>
              <StyledTableCell align="right">
                <ThemeProvider theme={theme}>
                  <Button
                    variant="contained"
                    color="primary"
                    className={classes.margin}
                    disabled={stock.owned === 0 || !stock.owned}
                    onClick={(event) => handleClick(event, index)}
                  >
                    BUY
                  </Button>
                </ThemeProvider>
              </StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

​

​