Question

我的单选按钮组件：

state = {
    radioValue: null,
  }



  render() {
    const { options,onPress } = this.props;
    const { radioValue } = this.state;

    return (
      <View style={{flexDirection: 'row'}}>
        {options.map(item => {
          return (
            <View key={item.key} style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.circle}
                onPress={() => {
                  this.setState({
                    radioValue: item.key,
                  });
                }}
              >
                {radioValue === item.key && <View style={styles.checkedCircle} />}
              </TouchableOpacity>
              <Text>{item.text}</Text>
            </View>
          );
        })}
      </View>
    );

然后我在另一个这样的组件中使用该组件：

 <RadioButton options={options} />

如何在第二个组件中使用状态值？谢谢！

Answer 1

最好的方法是将状态从RadioButton移到外部组件：

// RadioButton Component
  render() {
    const { options, onPress, value } = this.props;

    return (
      <View style={{flexDirection: 'row'}}>
        {options.map(item => {
          return (
            <View key={item.key} style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.circle}
                onPress={() => onPress(item.key)} // onPress comes from parent
              >
                {value === item.key && <View style={styles.checkedCircle} />}
              </TouchableOpacity>
              <Text>{item.text}</Text>
            </View>
          );
        })}
      </View>
    );

// Parent component
  state = {
    radioValue: null,
  }

  onPress = (value) => {
    this.setState({
      radioValue: value,
    });
  }

  render() {
    // ...
    <RadioButton
      options={options}
      onPresss={this.onPress}
      value={radioValue}
    />  
    // ...
  }

如果您无法执行此操作，则另一种方法是使用render props。这将使您将状态保留在子级中，并将其传递给父级。不过，不建议这样做，因为它更令人困惑。

如何像道具一样传递状态值

1 个答案: