reactJsでユーザーの入力に応じてプロパティに異なる値を設定する方法

Question

名前が異なる複数の入力ボックスがあります。 "：のonChangeで未定義のプロパティを読み取ることができません 'handleChange' キャッチされない例外TypeError" それは等を介してのエラー

import React, { Component } from 'react'; 
 
import cookie from 'react-cookie'; 
 
import Request from 'superagent'; 
 

 
export default class Performance extends Component { 
 
    constructor() { 
 
     super(); 
 
     this.state = { 
 
       fullName : cookie.load('fullName'), 
 
       empId : cookie.load('empId'), 
 
       userResults : [{ 
 
        "sectionTitle": "Customer Orientation", 
 
        "isMandatory": 0, 
 
        "question": [{ 
 
         "qusId": 1, 
 
         "question": "Number of customer ", 
 
         "weightage": 15, 
 
        }] 
 
       }] 
 
     }; 
 
     
 
    } 
 
    handleChange(event) { 
 
      this.setState({[event.target.name]: event.target.value});   
 
    } 
 

 
render() { 
 
    
 
    return ( 
 
     <div > 
 
       
 
      <div className="container "> 
 
       <form className="form-signin1"> 
 
        { 
 
        this.state.userResults.map(function(res) 
 
        { 
 
         var questions = res.question.map(function(res1){ 
 
          return (
 
            <tr> 
 
             <td><input type="textbox" value="" name={'ques_check_box_1_1'} onChange={(e) =>{this.handleChange.bind(this)}}/></td> 
 
             <td><input type="textbox" value="" name={'ques_check_box_1_2'} onChange={(e) =>{this.handleChange.bind(this)}}/></td> 
 
             <td><input type="textbox" value="" name={'ques_check_box_1_3'} onChange={(e) =>{this.handleChange.bind(this)}}/></td> 
 
            </tr> 
 
           ) 
 
          }); 
 
         return (
 
          <div className="row">   
 
           <table className="table text-center" > 
 
            <thead> 
 
             <th width="400">Deliverables</th> 
 
             <th>Justifications</th> 
 
             <th>Weightage</th> 
 
             <th className="lastHead">Employee <br />Weightage</th> 
 
            </thead> 
 
            <tbody> 
 
             {questions} 
 
            </tbody> 
 
           </table> 
 
          </div> 
 
         ) 
 
        }) 
 
        } 
 
       </form> 
 
      </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

関数を呼び出し中。解決するのを手伝ってください。あなたはmapでcallback方法を使用しているので、あなたはfunctionで.bind(this)を使用してもcontextを維持するために持っている、またはあなたがarrow functionsを使用することができ、それはあなたのためにこの仕事をする

Answer 1

、あなたは、およそbindingを心配する必要はありませんこれを試してみてください：

this.state.userResults.map((res, i)=> 
{ 
    var questions = res.question.map((res1,j)=>{ 
     return (
       <tr key={j}> 
        <td><input type="textbox" value="" name={'ques_check_box_1_1'} onChange={this.handleChange.bind(this)}/></td> 
        <td><input type="textbox" value="" name={'ques_check_box_1_2'} onChange={this.handleChange.bind(this)}/>/></td> 
        <td><input type="textbox" value="" name={'ques_check_box_1_3'} onChange={this.handleChange.bind(this)}/>/></td> 
       </tr> 
      ) 
     }); 
    return (
     <div className="row" key={i}>   
      <table className="table text-center" > 
       <thead> 
        <th width="400">Deliverables</th> 
        <th>Justifications</th> 
        <th>Weightage</th> 
        <th className="lastHead">Employee <br />Weightage</th> 
       </thead> 
       <tbody> 
        {questions} 
       </tbody> 
      </table> 
     </div> 
    ) 
}) 

そして、この部分で、あなたは二回bindingeventです：

onChange={(e) =>{this.handleChange.bind(this)}}

のいずれかのようにそれを使用する：

onChange={this.handleChange.bind(this)} 

又は

onChange={(e) =>{this.handleChange(e)}} 

提案：ループ内で動的uiを作成する際に、各elementに一意keyを割り当てます。