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

Question

我已经为 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;
  }
}

Answer 1

是的，您的值未定义..使用此修改后的代码，现在它可以正常工作了..

    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)..试试这段代码，它会给你更有趣的事实