Javascript React中的输出表单字段值

我目前正在开发我的第一个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>;

类外围设备页扩展React.Component{
状态={
外围设备：[
{
名称：“产品1”，
安装：79.99，
每月：5.99，
计数：1，
民:1,，
最高：5，
外围映像：外围映像
},
{
名称：“产品2”，
安装日期：19.99，
每月：9.99，
计数：2，
民:2,，
最高：12，
外围映像：外围映像
},
{
名称：“产品3”，
安装日期：19.99，
每月：9.99，
计数：4，
民:3,，
最高：8，
外围映像：外围映像
}
]
};
onChange=（索引，val）=>{
这是我的国家({
外围设备：this.state.peripherals.map(
（名称，i）=>（i==索引？{…名称，计数：val}：名称）
)
});
};
提交包装=（e）=>{
e、 预防默认值（）；
var periphers={PeripheralList}
var installationCost={InstallTotal}
警报（“您的软件包包括：”+外围设备列表+安装成本）；
}
render（）{
返回(
);
}
}
常量外围设备列表=（{peripherals，onChange}）=>
{peripherals.map（（peripherals，i）=>
{peripherals.name}
安装：£{外围设备.安装}
每月：{外围设备。每月}
onChange（i，parseInt（e.target.value，10）| | 0）}
/>
)}
;
const InstallTotal=（{peripherals}）=>
安装费用：
{peripherals.reduce（（sum，i）=>（sum+=i.count*i.installation），0）}
;
const MonthlyTotal=（{peripherals}）=>
每月费用：
{外围设备减少（（总和，i）=>（总和+=i.count*i.monthly），0）}
;

---

对于此事的任何协助，我们将不胜感激

您的输入

输入

需要有

名称

如下：

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

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

---

您的输入

输入

需要有

名称

如下：

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

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

---

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

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

从“/myjsonfile.json”导入productdata；
类productTable扩展了React.Component{
render（）{
返回(
{productdata.data.productgroup[0].name}
{productdata.data.productgroup[0].说明}
价格：英镑{
productdata.data.productgroup[0]。价格
}
{productdata.data.productgroup[1].name}
{productdata.data.productgroup[1].description}
价格：英镑{
productdata.data.productgroup[1].价格
}
);
}
}

---

请注意，“data”和“productgroup”是json文件本身中的值，方括号中的数字是出现在中的值的产品组。我想出来了，这比我之前做的要简单，下面是我的新代码

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

从“/myjsonfile.json”导入productdata；
类productTable扩展了React.Component{
render（）{
返回(
{productdata.data.productgroup[0].name}
{productdata.data.productgroup[0].说明}
价格：英镑{
productdata.data.productgroup[0]。价格
}
{productdata.data.productgroup[1].name}
{productdata.data.productgroup[1].description}
价格：英镑{
productdata.data.productgroup[1].价格
}
);
}
}

---

请注意，“数据”和“产品组”是json文件本身中的值，方括号中的数字是这些值出现在

Hi中的产品组。谢谢你的回答，但恐怕我不太明白。PeripheralList组件中的“number”输入已经有一个onChange，用于在表单底部生成一个总数，我通常在onFormInputChange的位置，因为当我尝试输入它时，它会带来一个错误。还有，一旦按下Submit按钮，我将如何输出表单的值。如果我在这里太慢了，我很抱歉，但我只是有点困惑。当您更改表单中的值时，您的状态是否会相应地更新？我相信是的。当我在输入中输入一个新数字时，底部的总数正在更新。问题是，我不确定如何将表单中显示的值（一旦输入了所需的输入）输出到一个唯一的JSON文件中，我可以在应用程序的另一个区域中使用它们。是的，beHi认为。谢谢你的回答，但恐怕我不太明白。外围设备列表组件中的“number”输入已经有一个onChange，用于在表单底部生成总计，我通常是wh