Question

我有多个不同名称的输入框。在打电话的时候

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

通过像“未捕获的TypeError：无法在onChange中读取未定义的属性'handleChange'的错误来执行它”。请帮我解决。

Answer 1

您在callback中使用map方法，因此您必须使用context .bind(this)来维护function，或者您可以使用arrow functions {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>
    )
})

在这部分中，您binding event两次：

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

要么像这样使用它：

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

或

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

建议：在动态循环创建key时，为每个element分配唯一的ui。

如何根据用户在reactJs中的输入设置不同的属性值

1 个答案: