Question

import React, { Component } from 'react'

interface orderInformation {
    customer: number;
    picklePrice: number;
    breadPrice: number;
}

interface ComponentState
{
    customer: number;
    picklePrice: number;
    breadPrice: number;
    error: string;
    finalPickleCost: number;
    finalBreadCost: number;
}

export default class pickleSandwich extends Component<orderInformation,ComponentState> {


    constructor(props: orderInformation) {
        super(props);

        //initializing variables to undefined
        this.state = {
          customer: 0,
          picklePrice: 0,
          breadPrice: 0,
          finalBreadCost:0,
          finalPickleCost:0,
          error: ""
        };
        this.handleChange = this.handleChange.bind(this);
      }


//Get information for the user
    getInfo = orderInformation => {
        orderInformation.preventDefault();

        const { customer, picklePrice, breadPrice } = this.state;

        let pickleCounter = 0;
        let breadCounter = 0;
        if (customer > 0) {
            for(let i = 0; i < customer; i++)
            {
                if( i%3 === 0)
                {
                    pickleCounter = pickleCounter + 2;
                    breadCounter = breadCounter + 3;
                }
                else
                {
                    pickleCounter = pickleCounter + 1;
                    breadCounter = breadCounter + 2;
                }
                this.setState({
                    finalPickleCost: pickleCounter * picklePrice,
                    finalBreadCost: breadCounter * breadPrice,
                    error: ""
                });
            }

          } else {
            this.setState({
              error: "Please enter the values correctly."
            });
        };
    };

    handleChange = e => {
        this.setState({ [e.target.name]: e.target.value } as any
            );
        };


render() {

   // const { customer, finalPickleCost, finalBreadCost } = this.state;

        return (
        <form onSubmit={this.getInfo}>
      <p>Get the information of the order!</p>
      <input
        type="text"
        id="Customers"
        value = "Customers"
        placeholder="Amount of Customers"
        name="Customer"
        onChange={this.handleChange}
        required
      />
      <input
        type="text"
        id="picklePrice"
        placeholder="Price of Pickle"
        value = "picklePrice"
        name="picklePrice"
        onChange={this.handleChange}
        required
      />

      <input
        type="text"
        id="breadBrice"
        placeholder="Price of Bread"
        value = "breadPrice"
        name="breadPrice"
        onChange={this.handleChange}
        required
      />
      <button type="submit">Get Information </button>

    </form>
        );
}
}

每次运行此命令时，都不允许更改输入字段中的值，输入字段实际上会显示它的值，并且无法更改。由于某些原因，我无法输入任何值，甚至无法擦除输入字段中显示的内容。但是，我也希望每当单击“按钮”时该字段都为空。

Answer 1

可行，但是由于某些原因，当我执行console.log进行检查时价值观，我没有得到客户。我得到泡菜价格和面包价格但不是客户：/ –

因为输入名称和状态属性不同：

输入：name="Customer"

状态：customer: 0,

Typescript和reactJS的输入问题

1 个答案: