使用 class 在 javascript 中動態添加輸入字段

Question

當用戶單擊“添加”按鈕然后獲取字段數據時，我想要動態復制幾個字段。 我在網上找到了許多教程，例如教程，其中 state 用於動態創建新的輸入字段並記錄數據。 但是，我的應用程序位於 class 內部，我想找到等效版本以在 class 內部實現相同的功能。 我的代碼如下

class SerialQRScanClass extends React.PureComponent{
    

export const getTextFieldForSmall = (
  label,
  placeholder,
  value,
  onChange,
  error = false,
  helperText = '',
) => (
  <TextField
    fullWidth
    label={label}
    placeholder={placeholder}
    value={value}
    onChange={onChange}
    error={error}
    helperText={helperText}
    margin='none'
    size='small'
  />
);


handleChangeFromSerials(v) {
    console.log(v);
    //this.props.setSerialRangeFrom(v);
    //this.checkFromToSerials();
  }


xyz(): JSX.Element {

    return (
      <Paper elevation={3} className='abc'>
        <Grid container alignItems='flex-end'>
          <Grid item className='bcd'>
            {getTextFieldForSmall(
              <Typography variant='caption'>Title</Typography>,
              'Serial start',
              1000 || '',
              (e) => this.handleChangeToSerials(e.target.value),
              false,
              'Wrong serial' || '',
            )}
          </Grid>
        </Grid>
      </Paper>
    );
  }

我嘗試使用 UseState 創建的新代碼如下

class SerialQRScanClass extends React.PureComponent {

export const getTextFieldForSmall = (
  label,
  placeholder,
  value,
  onChange,
  error = false,
  helperText = '',
) => (
  <TextField
    fullWidth
    label={label}
    placeholder={placeholder}
    value={value}
    onChange={onChange}
    error={error}
    helperText={helperText}
    margin='none'
    size='small'
  />
);

protected handleChangeFromSerials(v) {
    console.log(v);
    //this.props.setSerialRangeFrom(v);
    //this.checkFromToSerials();
  }
    protected xyz(): JSX.Element {
        const [serialRegistrationTracker, setserialRegistrationTracker] = useState([]);

    const handleAdd = () => {
      const addNewField = [...serialRegistrationTracker, []];
      setserialRegistrationTracker(addNewField);
    };

return (
      <Paper elevation={3} className='abc'>
        <Button onClick={() => handleAdd()}> ADD NEW FIELD </Button>
        {serialRegistrationTracker.map((data, index) => {
          return (
            <div key={index}>
              <Grid container alignItems='flex-end'>
                <Grid item className='bcd'>
                   {getTextFieldForSmall(
              <Typography variant='caption'>Title
              </Typography>,
                    'Serial start',
              1000 || '',
              (e) => this.handleChangeToSerials(e.target.value),
              false,
              'Wrong serial' || '', 
                 )}
              </Grid>
            </Grid>
           </div>
          );
        })}

}
}

每次單擊“添加新字段”按鈕時，我都想重復輸入字段。

Answer 1

useState鈎子和所有 React 鈎子不能在 React class 組件中使用。 只需使用常規的 React state。 我建議將 state 聲明為一個對象數組，其中每個 object 都有一個 GUID 來唯一標識它。 在handleAdd處理程序 append 中，一個新的 object 具有新的 id 和空數據。 In the handleChangeFromSerials handler map the previous state array to the next state array, and for the matching element object by id shallow copy it into a new object reference and update the data.

import React from "react";
import { Button, Grid, Paper, Typography } from "@mui/material";
import { nanoid } from "nanoid";

interface Props {}

interface SerialRegistrationTracker {
  id: string;
  data: string;
}

interface State {
  serialRegistrationTracker: SerialRegistrationTracker[];
}

class SerialQRScanClass extends React.PureComponent<Props, State> {
  state = {
    serialRegistrationTracker: []
  };

  handleAdd = () => {
    this.setState((prevState) => ({
      ...prevState,
      serialRegistrationTracker: [
        ...prevState.serialRegistrationTracker,
        {
          id: nanoid(),
          data: ""
        }
      ]
    }));
  };

  handleChangeFromSerials = (id: string, data: string) => {
    this.setState((prevState) => ({
      ...prevState,
      serialRegistrationTracker: prevState.serialRegistrationTracker.map((el) =>
        el.id === id
          ? {
              ...el,
              data
            }
          : el
      )
    }));
  };

  render() {
    return (
      <Paper elevation={3} className="abc">
        <Button onClick={this.handleAdd}>ADD NEW FIELD</Button>
        {this.state.serialRegistrationTracker.map(({ data, id }) => (
          <div key={id}>
            <Grid container alignItems="flex-end">
              <Grid item className="bcd">
                <Typography variant="caption">Title</Typography>
                <textarea
                  value={data}
                  placeholder="Sample start form"
                  maxLength={10000}
                  onChange={(e) =>
                    this.handleChangeFromSerials(id, e.target.value)
                  }
                />
              </Grid>
            </Grid>
          </div>
        ))}
      </Paper>
    );
  }
}