Question

我目前正在开发我的第一个React App，我正在尝试创建一个简单的表单，它将输出值格式化，可以存储供以后使用（可能是JSON文件）。

我已经尝试将值输出到警报而不是直接转到JSON文件，但即便如此，我也没有成功。

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

我正在使用的代码片段如下。

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

您的输入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 });
    }

Answer 2

想出来，它比我做的更简单，我的新代码低于

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>
    );
  }
}

请注意＆＃34;数据＆＃34;和＆＃34;产品组＆＃34;是json文件本身的值，方括号中的数字是值出现在

中的产品组

React中的输出表单字段值

2 个答案: