Question

如何在选项中使用同一对象onChange

<Select
      options={this.state.materialunit.map(obj => {return({value: obj.materialunitID, label: obj.unitName + ': ' + obj.materialName})})}
      onChange={e => this.setState({unitPrice: obj.unitPrice })}
/>

Answer 1

要构建反应选择的选项，我建议将逻辑移至方法。因此，代码看起来像

onSelectMaterialUnit(selectedMaterialunit){
  //store selected option in state
  this.setState({selectedMaterialunit})

}
materialUnitOptions(){
  return this.state.materialunit.map(materialUnit => (
    {
      value: materialUnit.materialunitID,
      label: `${materialUnit.unitName}:${materialUnit.materialName}`
    }
   )
}


render(){
  return(

    <Select
       value={this.state.selectedMaterialunit}
       onChange={this.onSelectMaterialUnit}
       options={this.materialUnitOptions()}
     />

 )
}

此外，如果要直接传递选项而不映射标签和值，则可以在react-select v1中设置valueKey和labelKey，在v2中可以使用getOptionLabel和分别使用getOptionValue个方法。希望这会有所帮助。 Documentation here

如何在react-select中映射状态变量？

1 个答案: