我已经为 React Native 创建了一个组件来显示选项列表(单选按钮)。
它基本上是一个带有 View 和文本的 TouchableOpacity。显示单选按钮圆圈和标签文本的 View 。我已经向 TouchableOpactiy 添加了一个 onPress 处理程序。我想更改 TouchabelOpacity 内 View 的样式...
我认为在状态改变时组件会更新...
我错过了什么/做错了什么?
这是我的代码的一部分(完整代码:https://codesandbox.io/s/7knoyx5v9j)
class RadioButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = { value: props.selected ? props.selected : null };
this.handleRadioButtonChange = this.handleRadioButtonChange.bind(this);
}
handleRadioButtonChange = event => {
this.setState({ value: event.target.value });
};
render() {
const { disabled, name, options } = this.props;
const { value } = this.state;
const radioOptions = options.map(radio => (
<TouchableOpacity
key={radio[1].toString()}
id={value}
name={name}
value={radio[1]}
disabled={disabled}
onPress={this.handleRadioButtonChange}
>
<View style={value === radio[1] ? styleActive : styleInactive} />
<Text>{radio[0]}</Text>
</TouchableOpacity>
));
return radioOptions;
}
}
最佳答案
是的,您的值未定义.. 使用此修改后的代码,现在它可以正常工作了..
class RadioButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = { value: props.selected ? props.selected : null };
}
handleRadioButtonChange = event => {
this.setState({ value: event });
};
render() {
const { disabled, name, options } = this.props;
const { value } = this.state;
const radioOptions = options.map(radio => (
<TouchableOpacity
key={radio[1].toString()}
id={value}
name={name}
value={radio[1]}
disabled={disabled}
onPress={() => this.handleRadioButtonChange(radio[1])}
>
<View style={value === radio[1] ? styleActive : styleInactive} />
<Text>{radio[0]}</Text>
</TouchableOpacity>
));
return radioOptions;
}
}
详细说明为什么我使用箭头而不是绑定(bind).. 试试这段代码,它会给你更有趣的事实
关于javascript - 如何在 React Native 中更新子组件 onPress 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53759914/