并非在每次选择时都调用选取器onValueChange
并非在每次选择时都调用选取器onValueChange
提问于 2017-07-25 10:05:26
我有一个带有硬编码值的选择器。在值更改时，我希望使用存储中的操作创建器函数用选定的值更新redux存储。但是，我遇到了一个问题，并不是每个选择更改都会调用onValueChange侦听器。
选取器代码
<Picker selectedValue={this.props.settings.colorScheme}
onValueChange={(value, itemIndex) => this.props.onValueChange({prop: 'colorScheme', value})}>
<Picker.Item value="blue" label="Blue"/>
<Picker.Item value="green" label="Green"/>
<Picker.Item value="orange" label="Orange"/>
<Picker.Item value="purple" label="Purple"/>
<Picker.Item value="red" label="Red"/>
</Picker>传递到组件以处理值更改的方法。我在这里设置了断点，但它们通常只在每一次其他选择时触发。从蓝色开始，然后选择橙色。然后选择绿色，它不会启动，然后选择红色，它将再次启动。
handleValueChange({prop, value}) {
this.props.updateSettings({prop, value})
}这是我的redux操作创建器
export function updateSettings ({prop, value}) {
return {
type: UPDATE_SETTINGS,
payload: ({ prop, value }),
}
}我的render方法(其中onValueChange变为handleValueChange)
render() {
return (
<Settings
settings={this.props.settings}
onValueChange={this.handleValueChange.bind(this)}
/>
)
}回答 1
Stack Overflow用户
发布于 2017-12-01 00:32:14
我已经找到了使用componentDidUpdate的解决方法
export default class PickerComponent extends PureComponent {
constructor (props) {
super(props)
this.state = {value:this.props.eventId}
}
componentDidUpdate () {
if (this.props.eventId !== this.state.value) {
this.props.chooseEvent(this.state.value)
}
}
onValueChange = value => {
if (value) this.setState({value})
}
makePickerItem (label, key) {
const props = {label, key, value:key}
return <Picker.Item {...props} />
}
makePickerItems = function * () {
for (let id in this.props.things) {
yield this.makePickerItem(this.props.things[id].name, eventId)
}
}
render () {
return (
<Picker
selectedValue={this.state.value}
onValueChange={this.onValueChange}
>
{[...this.makePickerItems()]}
</Picker>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45292719
复制相关文章
相似问题
腾讯云开发者
