在 React 中输出表单字段值答案

【问题标题】：Output Form Field Values in React在 React 中输出表单字段值
【发布时间】：2017-08-21 16:06:55
【问题描述】：

我目前正在开发我的第一个 React 应用程序，并且我正在尝试制作一个简单的表单，它将值输出为可以存储以供以后使用的格式（可能是 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>;

我们将非常感谢您就此事提供任何帮助。

【问题讨论】：

标签： javascript json forms reactjs output

【解决方案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 });
    }

【讨论】：

嗨。谢谢你的回答，但恐怕我不太明白。 PeripheralList 组件中的“数字”输入已经有一个 onChange 用于在表单底部生成一个总数，我确定 onFormInputChange 会去哪里，因为当我尝试输入它时会出现错误。此外，一旦按下提交按钮，我将如何输出表单的值。如果我在这里很慢，我很抱歉，但我有点困惑。
当您更改表单中的值时，您的状态是否会相应更新？
我相信是的。当我在输入中输入新数字时，底部的总数正在更新。问题是我不确定如何将表单中显示的值（一旦输入所需的输入）输出到一个唯一的 JSON 文件中，我可以在应用程序的另一个区域使用它们。
是的，看来是

【解决方案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>
    );
  }
}

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

【讨论】：