Question

我已经创建了一个组件来响应本机以显示选项列表（单选按钮）。

基本上，它是具有视图和文本的TouchableOpacity。显示单选按钮圆圈和标签文本的视图。我已经在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;
  }
}

Answer 1

event.target.value是undefined，因此条件始终呈现非活动样式。

handleRadioButtonChange = value => event => {
    this.setState({ value });
};

<TouchableOpacity
   ...
   onPress={this.handleRadioButtonChange(radio[1])}
>

查看有关事件here

的更多信息

Answer 2

是的，您的值未定义。使用此修改后的代码，现在它可以按需要工作。.

    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;
  }
}

详细说明为什么我使用箭头而不是绑定。尝试同时使用这两个代码，它将为您提供更多有趣的事实

如何在React Native中更新子组件onPress上的样式

2 个答案: