无法获取选择组目标 ID 以动态设置值

Question

这是我的选择组元素

 <ChoiceGroup defaultSelectedKey="No"
  options={[{ key: 'Yes', text: 'Yes' },{ key: 'No', text: 'No' }]}
  onChange={this._onChange}
  id={'ChoiceGroup1'}
  name={this.state.currentUser} />

还有我的 onChange 函数

public _onChange=(ev, option: IChoiceGroupOption)=> {
console.log(ev,option); } 

但我无法获得 target.id 值。目标显示为空，但在 Textfield 的情况下，我能够获取组件的名称和目标

Answer 1

您可以手动将所选项目的 id 传递给 _onChange 函数。

根据道具和用例，我假设您的 ChoiceGroup 组件通过“选项”道具映射并呈现另一个组件。如果是这种情况，您可以稍微调整一下，使其将点击的项目传递给父组件（这样您就可以决定如何处理它）。

所以在你的 ChoiceGroup 组件中添加

{options.map(option =>
<ChoiceGroupOption
  onClick={e => onItemSelected(option)}
/>}

 <ChoiceGroup defaultSelectedKey="No"
   options={[{ key: 'Yes', text: 'Yes' },{ key: 'No', text: 'No' }]}
   onItemSelected={item => this._onChange(e, item.id)}
   id={'ChoiceGroup1'}
   name={this.state.currentUser} />

然后在事件处理程序中输入：

public _onChange = (ev, selectedId)=> {
    console.log('ID: ', selectedId);
}