React + Typescript: как добавить поля numeri c и отобразить вывод в консоли?

Question

В настоящее время я использую модальное окно с двумя полями: одним текстовым и одним числовым c, но я не уверен, как установить атрибут name для числового c и отображать его в консоли? Текстовый работает нормально и может отображаться. Любая помощь приветствуется. Вот код:

interface State {
  contactName: string;
  amount: number;
}

interface Props {
  isOpen: boolean;
  handleClose: () => void;
  handleSendRequest: (values: State) => void;
}

export default class FormDialog extends React.Component<Props, State> {
  state = { contactName: "John", amount: 0 };//put 0 here for now since I get error if I put "number"

  onChange = (st: any) => (event: any) => {
    const newObject = { [st]: event.target.value } as Pick<State, keyof State>;
    this.setState(newObject);
    console.log(this.state);
  };

  render() {
    const { isOpen, handleClose, handleSendRequest } = this.props;
    return (
      <Dialog
        open={isOpen}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Send Money Request</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="standard-read-only-input"
            name="contactName"
            label="Contact Name"
            defaultValue={this.state.contactName}
            onChange={this.onChange("contactName")}
          />
          <TextField
            autoFocus
            margin="dense"
            id="amt"
            name="amount"   //need to make it so that the number appears in the console
            label="Amount"
            fullWidth
            onChange={this.onChange("amount")}
          />

Answer 1

Думаю, проблема не в самом поле, а в том, когда вы вызываете ‛console.log‛. ‛SetState‛ не работает сразу - он добавляет новое состояние в очередь и выполняет обновление компонентов позже. Если вы хотите увидеть новое значение состояния, переместите его в метод ‛render.

Второй шаг - использовать значение как ‛defaultValue‛ или value ‛в вашем компоненте‛ TextField ‛(теперь вы делаете это только для‛ contactName ‛