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."
            });
        console.log(this.state.customer);
        console.log(this.state.picklePrice);
        console.log(this.state.breadPrice);
        console.log(this.state.finalPickleCost);
        };

    };

    handleChange = e => {
        this.setState({ [e.target.name]: e.target.defaultValue } 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="customer"
            defaultValue="customer"
            placeholder="Amount of Customers"
            name="customer"
            onChange={this.handleChange}
            required
          />
          <input
            type="text"
            id="picklePrice"
            placeholder="Price of Pickle"
            defaultValue="picklePrice"
            name="picklePrice"
            onChange={this.handleChange}
            required
          />

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

        </form>
        );
}
}

我有这些输入字段，第一个为空，第二个为实际获取用户所做任何操作的值，第三个用于对值进行一些计算。

Answer 1

handleChange始终将每个输入字段的状态设置为默认值，因此用户输入永远不会生效。改为将其设置为e.target.value。

Answer 2

一些注意事项：

使用event.target.value而不是event.target.defaultValue，您将永远不会通过使用后者获取更新的数据。
您需要为每个输入映射一个组件状态值。即：您已经有一个onChange设置，但是输入永远不会真正反映组件中的数据，除非您做到这一点。
此外，您提供的defaultValues更有意义作为<label>标签，因为输入需要输入数字。

请参阅沙箱以供参考：https://codesandbox.io/s/intelligent-dan-uskcy

更新的组件：

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."
      });
      console.log(this.state.customer);
      console.log(this.state.picklePrice);
      console.log(this.state.breadPrice);
      console.log(this.state.finalPickleCost);
    }
  };

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

  render() {
    const { finalPickleCost, finalBreadCost } = this.state;

    return (
      <div>
        <form onSubmit={this.getInfo}>
          <p>Get the information of the order!</p>
          <label>Customers</label>
          <input
            type="number"
            id="customer"
            placeholder="Amount of Customers"
            name="customer"
            onChange={this.handleChange}
            value={this.state.customer}
            required
          />
          <label>Pickles</label>
          <input
            type="number"
            id="picklePrice"
            placeholder="Price of Pickle"
            name="picklePrice"
            onChange={this.handleChange}
            value={this.state.picklePrice}
            required
          />
          <label>Bread</label>
          <input
            type="number"
            id="breadBrice"
            placeholder="Price of Bread"
            name="breadPrice"
            onChange={this.handleChange}
            value={this.state.breadPrice}
            required
          />
          <button type="submit">Get Information </button>
        </form>
        <div style={{ textAlign: "left", marginTop: "50px" }}>
          <div>
            <label>Final Pickle Cost: </label>
            {finalPickleCost}
          </div>
          <div>
            <label>Final Bread Cost: </label>
            {finalBreadCost}
          </div>
        </div>
      </div>
    );
  }
}

输入字段值不是预期的值

2 个答案:

更新的组件：