2017-12-28 25 views
0

내가 읽어 문서 - 위젯의 반응 :반응 위젯 : onChange 함수에서 Combobox 이름 속성 값을 얻는 방법?

name 
type: string 
The HTML name attribute, passed directly to the input element. 

을 그리고 나는 어떤 콤보 상자의 onChange 함수의 이름 속성 값을 얻을 수 있습니다. 그래서 쓴 :

<Combobox 
      data={featuredWeightList} 
      valueField="id" 
      textField="displayName" 
      name="featuredWeight" 
      defaultValue={featuredWeight} 
      value={featuredWeight} 
      onChange={this.handleFeaturedWeightChange} 
      /> 

handleFeaturedWeightChange = (evt) => { 
    const id = evt.id; 
    const id = evt.displayName; 
    // I do not have name property in evt variable 

    }; 

evt 변수에 이름 속성이 없습니다. "id"및 "displayName"속성 만 있습니다.

그러나 정상적인 html 입력은 onChange 함수에서 name 속성을 직접 가져올 수 있습니다.

<Input 
      type="text" 
      name="address" 
      value={door.address} 
      onChange={this.handleInputChange} 
     /> 

handleInputChange = (evt) => { 
const target = evt.target; 
const name = target.name; 
console.log('Input value: ', value); 
console.log('Input name: ', name); 
}; 

사람이 어떻게의 onChange 함수에서 콤보 상자의 이름 속성 값을 얻는 방법에 대한 을 몇 가지 제안이 있습니까

:이처럼?

감사!

+0

하나 개 이상의 속성은 콤보 상자에서 콜백에서 전송되는가? 당신은 첫 번째 (evt)만을 가져옵니다. 그것은 실제로 콤보 박스 구성 요소가 어떻게 구성되어 있는지에 달려 있습니다. 그것이 무엇을 반환하는지 등등. 그게 무슨 리포 야? – thsorens

+0

@thsorens 두 번째 속성이 있습니다. 그러나 두 번째 속성에 name 속성이 포함되지 않은 것은 매우 이상합니다. 어쨌든 도움에 많은 감사드립니다! – Shi

답변

0

(그것은 다른 사람을 도울 수 있기를 바랍니다) :

handleComboboxChange = (data, param) => { 
    console.log(data, param); 
    //Output: {id: 5, displayName: 5} "featuredWeight" 

    }; 

<Combobox 
    data={featuredWeightList} 
    valueField="id" 
    textField="displayName" 
    name="featuredWeight" 
    defaultValue={featuredWeight} 
    value={featuredWeight} 
    onChange={(param) => this.handleComboboxChange(param, 'featuredWeight')} 
/> 
1

javascript bind() 함수를 사용할 수 있습니다.

<Combobox 
      data={featuredWeightList} 
      valueField="id" 
      textField="displayName" 
      name="featuredWeight" 
      defaultValue={featuredWeight} 
      value={featuredWeight} 
      onChange={this.handleFeaturedWeightChange.bind(this, "featuredWeight")} 
      /> 

handleFeaturedWeightChange = (name, evt) => { 
    const id = evt.id; 
    const id = evt.displayName; 
    // I do not have name property in evt variable 
    console.log('name', name); 
    }; 

이 일을하는 또 다른 방법 (바인드없이()) : 현재 선택된 값을 읽기 위해이 변수를 사용할 수 있습니다

function a(name) { 
    return function(evt) { 
     console.log('name', name) 
    } 
}; 

var b = a('featuredWeight'); 
b({a: 'a', b: 'b'}); 
+0

'handleFeaturedWeightChange' 함수는 컴포넌트에서 볼 수 있습니다. 그래서 나는 그것이 bind() 때문이 아니라고 생각합니다. – Shi

+0

@ b-bastien 도움에 감사드립니다. ESLint에 따르면, JSX props는 .bind()를 사용하지 말아야한다. 그러나이 문제를 해결할 더 좋은 방법이 없다면, 나는 이렇게 할 것입니다. bind()가없는 방식에 대해서. onChange 함수에서 컴포넌트 이름을 얻고 싶으므로 다른 컴포넌트를 처리하기 위해 동일한 핸들러를 사용할 수 있습니다. 그래서 그것은 나를 위해 작동하지 않을 수 있습니다. – Shi

0

function a(name, evt) { 
    console.log('name', name); 
    console.log('evt', evt); 
}; 

var b = a.bind(this, 'featuredWeight'); 
b({a: 'a', b: 'b'}); 

그래서 같이한다 . onchange 함수의 은 다음 코드 줄을 작성합니다.

나는이 방법으로이 문제를 해결

$('#RequestTypeId').change(function (e) { 
 
     if ($(this).val() === "1") { 
 
      //your code 
 
      
 
     }