입력의 onChange 핸들러에 여러 매개 변수를 전달하는 방법

입력의 onChange 핸들러에 여러 매개 변수를 전달하는 방법

배열 내의 객체에 대한 입력 요소 컬렉션을 렌더링합니다.

render: function() {
    var ranges = [];
    this.props.ranges.map(function(range, index) {
        var rangeElement = <Input type="text"
            value={range.name} onChange={this.changeRangeName.bind(this)} />
        ranges.push(rangeElement);
    }, this);

    // render ranges
}

이를 통해 onChange 핸들러 함수를 쓸 수 있습니다.

changeRangeName: function (event) {
    var newName = event.target.value;
},

그러나 이 핸들러에서는 변경할 범위 객체의 ID가 필요합니다.따라서 렌더 함수의 입력 요소 작성 방법을 변경하고 다음을 변경할 수 있습니다.

var rangeElement = <Input type="text"
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

이제 핸들러는 파라미터로 range.id을 수신하지만 newName 값이 없습니다.레퍼런스를 사용해서 얻을 수 있다.

var rangeElement = <Input type="text"
            ref={'range' + range.id}
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

이게 내가 아는 유일한 해결책이지만 더 나은 해결책이 있을 것 같아.

이 방법이 더 쉽다고 생각합니다.

    <Input type="text"
                value={range.name}
                onChange={(e) => this.changeRangeName(range.id, e)}
        ...
    onChange(id, e) {
        ...
    }

그event인수는 아직 통과되었지만rangeId인수 목록 앞에 인수가 붙기 때문에changeRangeName방법은 다음과 같습니다.

changeRangeName: function (rangeId, event) {
    var newName = event.target.value;
},

Function.protype.bind() 참조

언급URL : https://stackoverflow.com/questions/29099610/how-to-pass-multiple-parameters-to-inputs-onchange-handler