Javascript 输入一个数字后，React输入字段失去焦点_Javascript_Reactjs

Javascript 输入一个数字后，React输入字段失去焦点

javascript reactjs

Javascript 输入一个数字后，React输入字段失去焦点,javascript,reactjs,Javascript,Reactjs,目前，只要我键入一个数字，输入字段就会失去焦点。所以我把sharesToBuy.map部分赋值给变量，然后把它移到StockQuotes组件之外。然后我得到错误消息，说StyleTabledCell和StyleTable行没有从MaterialUI中重新格式化。如何重新排列组件，使输入字段不会失去焦点？或者我可以用什么钩子来解决这个问题？我尝试了autofocus（）、useRef和将组件移到外部，但似乎没有任何效果 import React, { useState, useEffect } f

目前，只要我键入一个数字，输入字段就会失去焦点。所以我把sharesToBuy.map部分赋值给变量，然后把它移到StockQuotes组件之外。然后我得到错误消息，说StyleTabledCell和StyleTable行没有从MaterialUI中重新格式化。如何重新排列组件，使输入字段不会失去焦点？或者我可以用什么钩子来解决这个问题？我尝试了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>
    )
}

import React，{useState，useffect}来自“React”；
导入“./StockQuotes.css”；
从“@material ui/core/styles”导入{createMuiTheme，withStyles，makeStyles，ThemeProvider}；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“../util/stockData”导入stockData；
从'react redux'导入{useDispatch}；
从“../slices/stocksOwnedSlice”导入{getStocksOwned}；
常量StockQuotes=（{availableFunds，setAvailableFunds}）=>{
const[sharesToBuy，setSharesToBuy]=useState（股票数据）；
报税表（
股票名称
现行价格
分享
命令
{sharesToBuy.map（（股票、指数）=>(
{stock.name}
${stock.price}
handleChange（事件、索引）}>
handleClick（事件、索引）}>
购买
))}
)
}

问题您正在

StockQuotes

组件的render函数中定义样式化组件

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>
  );
};

功能组件的整个函数体就是渲染函数！
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> ); };

constyledtablecell=withStyles（（主题）=>({ 负责人：{ 背景色：theme.palette.common.black，颜色：theme.palette.common.white }, 正文：{ 尺寸：14 } }))（表细胞）； const StyledTableRow=带有样式（（主题）=>({ 根目录：{ “&：第n个类型（奇数）”：{ 背景色：theme.palete.action.hover } } }))（表行）；常量StockQuotes=（{availableFunds，setAvailableFunds}）=>{ ... 返回( 股票名称现行价格分享命令 {sharesToBuy.map（（股票、指数）=>( {stock.name} ${stock.price} handleChange（事件、索引）} > handleClick（事件、索引）} > 购买 ))} ); };

我认为这通常是由于包含输入的某个组件被重新装载，而不是重新加载，因此焦点丢失。您能否尝试创建一个正在运行的沙盒来重现焦点问题？是的，谢谢，这是沙盒链接-->这解决了问题！非常感谢。这是我第一次使用material ui，我不知道每次渲染时withStyles都会创建新组件。再次感谢@JudoboyAlex太好了！请接受并投票回答。干杯