出力形式のフィールド値が

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

この問題については、何か助けてください。

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

をそしてそうのようなあなたのonChangeは次のようになります。：必要input

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"と "produc tgroup "はjsonファイル内の値、角括弧内の数値は値が

Answer 2

あなたの入力はそうのようなnameを持っている

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