React中的输出表单字段值

Question

我目前正在开发我的第一个React应用程序，我正在尝试制作一个简单的表单，它将输出值为一种格式，可以存储为以后使用(可能是JSON文件)。

我尝试过将值输出到警报，而不是直接输出到JSON文件，但即使这样也没有成功。

基本上，我想要的是从表单中获取按下submit按钮时所处状态的值，并将它们输出为可用的格式。

下面是我使用的代码片段。

class PeripheralPage extends React.Component {
    state = {
    peripherals: [
      {
        name: "Product 1",
        installation: 79.99,
        monthly: 5.99,
        count: 1,
        min: 1,
        max: 5,
        perimage: peripheralimage
      },
      {
        name: "Product 2",
        installation: 19.99,
        monthly: 9.99,
        count: 2,
        min: 2,
        max: 12,
        perimage: peripheralimage
      },
      {
        name: "Product 3",
        installation: 19.99,
        monthly: 9.99,
        count: 4,
        min: 3,
        max: 8,
        perimage: peripheralimage
      }
    ]
  };

  onChange = (index, val) => {
    this.setState({
      peripherals: this.state.peripherals.map(
        (name, i) => (i === index ? { ...name, count: val } : name)
      )
    });
  };


  submitPackage = (e) => {
    e.preventDefault();
    var periphs = {PeripheralList}
    var installationCost = {InstallTotal}
    alert('Your Package includes: ' + PeripheralList + installationCost );
  }


  render() {

    return (
      <div>
      <form onSubmit={this.submitPackage.bind(this)}>
        <PeripheralList
          peripherals={this.state.peripherals}
          onChange={this.onChange.bind(this)}
        />
        <InstallTotal ref="installCost" peripherals={this.state.peripherals} />
        <MonthlyTotal peripherals={this.state.peripherals} />
        <input type="submit" value="Save Package" />
        </form>
      </div>
    );
  }
}

const PeripheralList = ({ peripherals, onChange }) =>
  <div>
    {peripherals.map((peripherals, i) =>
      <div key={i}>
        <div className="componentname">{peripherals.name}</div>
        <div className="installcost">Install: £{peripherals.installation}</div>
        <div className="monthlycost">Monthly: £{peripherals.monthly}</div>
        <div className="quantity">
        <input
          type="number"
          min={peripherals.min} 
          max={peripherals.max}
          value={peripherals.count}
          onChange={e => onChange(i, parseInt(e.target.value, 10)|| 0)}
        />
        </div>

      </div>
    )}
  </div>;

const InstallTotal = ({ peripherals }) =>
  <h3>
    Installation Cost:
    £{peripherals.reduce((sum, i) => (sum += i.count * i.installation), 0)}
  </h3>;

const MonthlyTotal = ({ peripherals }) =>
  <h3>
    Monthly Cost:
    £{peripherals.reduce((sum, i) => (sum += i.count * i.monthly), 0)}
  </h3>;

在这件事上，任何帮助都会非常感谢。

Answer 1

弄清楚了，它比我做的要简单，我的新代码如下

import productdata from "./myjsonfile.json";

class productTable extends React.Component {
  render() {
    return (
      <table>
        <tbody>
          <tr>
            <td>
                <span>
                  {productdata.data.productgroup[0].name} 
                </span>
                <span>
                  {productdata.data.productgroup[0].description}
                </span>
                <span>
                  Price: £{
                    productdata.data.productgroup[0].price
                  }
                </span>
            </td>
          </tr>
         <tr>
            <td>
                <span>
                  {productdata.data.productgroup[1].name} 
                </span>
                <span>
                  {productdata.data.productgroup[1].description}
                </span>
                <span>
                  Price: £{
                    productdata.data.productgroup[1].price
                  }
                </span>
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

请注意，"data“和"productgroup”是json文件本身中的值，方括号中的数字是这些值所在的产品组。

Answer 2

您的输入input需要如下所示的name：

<input
          onChange={this.onFormInputChange}
          name ='number_name'
          type="number"
          min={peripherals.min} 
          max={peripherals.max} />

你的onChange应该是这样的：

onFormInputChange(event) {
        let form = this.state.form;
        form[event.target.name] = event.target.value;
        this.setState({ form });
    }